Sé que hay TONELADAS de preguntas similares sobre esto, PERO hasta ahora no he encontrado una solución. En este caso, tengo un form dentro del main.

Según lo que he leído hasta ahora, el elemento principal (main) debería tener una altura de 100vh. Sin embargo, si hago eso, si agrego mucho contenido al elemento (form), el contenido se procesará fuera del elemento form .

Si el elemento main tiene una altura del 100%, no se extenderá hasta la parte inferior de la página si el contenido es corto.

Aquí está mi código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Height</title>
    <style type="text/css">
        html * {
            font-family: sans-serif;
            box-sizing: border-box;
            height: 100%;
        }
        body {
            height: 100%;
            background-color: #555;
            margin: 0;
            padding: 0;
        }
        header {
            width: 100%;
            background-color: white;
            padding: 10px;
            margin: 0;
            position: sticky;
            top: 0;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header span, button {
            margin: 5px;
        }
        main {
            padding: 0;
            display: flex;
            align-items: stretch;
            height: 100%;
            width: 100%;
        }
        form {
            padding: 0;
            width: 40%;
            background-color: #ddd;
            margin: 0 auto;
            height: 100%;
            min-height: 100%;
        }
    </style>
    <script type="text/javascript">
        window.addEventListener("load", () => {
            const myform = document.querySelector('form');
            let $ = function (id) { return document.getElementById(id); };
            $('longtext').onclick = () => {
                myform.innerHTML = "<p>A lot of content".repeat(100);
            };
            $('shorttext').onclick = () => {
                myform.innerHTML = '<p>Short text';
            };
            $('notext').onclick = () => {
                myform.innerHTML = '';
            };
        });
    </script>
</head>
<body>
    <header>
        <span>Click a button</span>
        <button id="notext">No Text</button>
        <button id="longtext">Long Text</button>
        <button id="shorttext">Short Text</button>
    </header>
    <main>
        <form></form>
    </main>
</body>
</html>
1
astigmatik 23 ene. 2021 a las 09:54

1 respuesta

La mejor respuesta

Simplemente modifique su estilo CSS para. No use una altura fija solo una altura mínima. Llena toda la altura y si el contenido crece, crecerá con él.

main {
  background-color: red;
  padding: 0;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100vh;
}

0
Maaart 23 ene. 2021 a las 07:13