当孩子们这样做时，如何让父 div 调整大小？答案

【问题标题】：How do I get a parent div to resize when the children do?当孩子们这样做时，如何让父 div 调整大小？
【发布时间】：2022-02-13 08:01:47
【问题描述】：

我正在使用我正在开发的程序遇到这个问题，但我无法找到解决方案。基本上我有一个 webapp，在初始渲染时，整个页面的高度为 X。有一个背景颜色，该颜色覆盖了页面的整个高度。

初始渲染后的片刻，数据被异步获取并添加到页面。数据导致页面的总高度变大。不幸的是，只有页面的原始高度显示背景颜色，低于该高度背景变为白色。

经过进一步调查，我发现这是由于父 div 在子 div 调整大小时没有调整大小。基本上，通过异步数据加载添加到其中的 div 获取元素的高度会增加，但环绕它的父级（以及具有背景色的父级）不会。

在调查过程中，我找到了部分解决方案：将“高度”设置为“自动”。这个解决方案的问题是当页面最初加载时，背景颜色只应用于页面的实际内容部分，而不是填充屏幕。因此，如果我的高度为“自动”，则在添加项目后首次加载页面时颜色会被搞砸，如果高度为“100%”，则在添加项目后颜色会被搞砸.

我已经整理了一个重新创建问题的准系统 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Layout Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #root {
            background-color: cyan;
            height: 100%;
        }

        #root > h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="root">
        <h1>Layout Test</h1>
        <div id="container"></div>
    </div>
    <script>
        setTimeout(() => {
            const container = document.querySelector('#container');
            for (let i = 0; i < 100; i++) {
                const h1 = document.createElement('h1');
                h1.textContent = 'Hello';
                container.appendChild(h1);
            }
        }, 1000);
    </script>
</body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以在 #root 元素 CSS 上设置 min-height: 100vh;，使其始终至少是视口的高度。

【讨论】：

我现在出去了，但如果我回到家并且那行得通，我会面对手掌哈哈。我试过身高 100vh，但你的想法很有意义

【解决方案2】：

在#root 上设置 100% 的最小高度，而不是高度，似乎可以解决问题：

<!DOCTYPE html>
<html>
<head>
    <title>Layout Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #root {
            background-color: cyan;
            min-height: 100%;
        }

        #root > h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="root">
        <h1>Layout Test</h1>
        <div id="container"></div>
    </div>
    <script>
        setTimeout(() => {
            const container = document.querySelector('#container');
            for (let i = 0; i < 100; i++) {
                const h1 = document.createElement('h1');
                h1.textContent = 'Hello';
                container.appendChild(h1);
            }
        }, 1000);
    </script>
</body>
</html>

【讨论】：

设置height: 100% 强制它成为视口的高度，无论其内容如何。这就是 min-height: 100% 起作用的原因。

【解决方案3】：

您可以在父元素上使用height: fit-content; 和width: fit-content;

【讨论】：