父 div 不适合内容 [重复]答案

【问题标题】：Parent div does not grow to fit content [duplicate]父 div 不适合内容 [重复]
【发布时间】：2022-02-15 05:06:54
【问题描述】：

我有 3 个 div 在父 div 内，但父 div“main”不会调整高度以适应 div 内部的所有内容。

<div id="main" style="width: 1000px; height: 100% overflow: hidden;">
  <div id="menu" style="width:250px; float: left;">
    <ul>
      <li>Menu items</li>
      <li>Menu items</li>
      <li>Menu items</li>
    </ul>
  </div>
  <div id="content" style="width:500px; height: 1000px float: left;">
    <p>CONTENT</p>
  </div>
  <div id="menu" style="width:250px; float: left;">
    <ul>
      <li>Menu items</li>
      <li>Menu items</li>
      <li>Menu items</li>
    </ul>
  </div>
</div>

正如您在上面看到的“内容”的高度是 1000 像素，但父“主”不会调整为 1000 像素，它只是停止显示“内容”的内容，因为“主”用完了高度。

任何人都知道我该如何解决这个问题

【问题讨论】：

你必须清除浮动和 height:100% 可能是一个问题，这取决于 main 的父级是什么。清除浮动应该可以解决问题
错字问题：高度：100% 后缺少;

标签： html css

【解决方案1】：

如果你想让父 div 增长到适合内容，你可以使用height:max-content，

另外，您错过了用于高度的;，这使得height:1000px 和height:100% 用于content 不起作用

#main{
 height:max-content;
 border:2px solid black;

}
#content{
 width:500px;
 height: 1000px;
 float: left;
}

<div id="main" style="width: 1000px; overflow: hidden;">

<div id="menu" style="width:250px; float: left;">
<ul>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
</ul>
</div>

<div id="content" >
<p>CONTENT</p>
</div>

<div id="menu" >
<ul>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
<li>Menu items</li>
</ul>

</div>

</div>

【讨论】：

【解决方案2】：

顺便说一句，你在 CSS 中留下了一堆分号。您特别声明容器 div 的高度为 100%（即视图/窗口的 100%），并将其溢出设置为“隐藏”。所以你描述的行为是可以预料的。尝试删除 overflow 和 height 属性，看看会发生什么。

【讨论】：

height: 100% 不适用于视图/窗口的 100% 高度。那将是100vh。 height: 100% 表示父母身高的 100%。但是，这需要父级具有定义的高度而不是计算出的高度以适应内容。
touché，但我假设容器的父级是 <body>。