Как мы можем настроить высоту родительского элемента в зависимости от его содержимого?

#html #css

#HTML #css

Вопрос:

Я знаю, что есть МНОЖЕСТВО подобных вопросов по этому поводу, НО я пока не нашел решения. В этом случае у меня есть form внутри main .

Исходя из того, что я прочитал до сих пор, родительскому элементу ( main ) следует присвоить высоту 100vh. Однако, если я это сделаю, если я добавлю много содержимого в элемент ( form ) , содержимое будет отображаться за пределами form элемента.

Если main элемент имеет высоту 100%, он не будет растягиваться до нижней части страницы, если содержимое короткое.

Вот мой код:

 <!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:

Просто измените свой стиль CSS для . Не используйте фиксированную высоту, просто минимальную высоту. Он заполнит всю высоту, и если содержимое будет расти, оно будет расти вместе с ним.

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