Html CSS：包含div的div的高度

我有一个非常简单的div，包含一些左浮动div：

<div id="group1" style="padding: 10px">
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
</div>

...
...
...
...

现在我有一些关于组1高度的问题。基本上，填充底部不起作用，因为group1的高度不是动态的。在开发工具中，它显示总是21px。根据浏览器窗口的大小，内部div需要更多的空间。我尝试了一些高度组合：自动高度和最小高度，但都不起作用

我真的需要根据浏览器窗口的大小来计算高度吗？应该有更方便的

非常感谢您的帮助！谢谢

你好
你好
你好
你好

我已相应地更改了您的代码，并添加了一些必需的属性。请参阅以下代码片段

...
...
...
...

问题在于内部元素浮动。 一个解决方案是@LokeshGupta发布的内容。 但另一种方法是，如果您不想要浮动父对象，则使用清除块：

<div id="group1" style="padding: 10px">
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="clear: both;"></div>
</div>

...
...
...
...

您还可以使用：

<div id="group1" style="padding: 10px; width:100%; display:table;">
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
</div>

你好
你好
你好
你好

当一个元素使用属性

float

时，它不会影响父元素的大小，它只是在那里浮动，甚至内联元素也会影响父元素

因此，无论何时使用此类div，都必须清除浮动上下文

有几种方法可以实现这一点：

• 将div与

  清除一起使用：两者都有在父元素中的浮动元素之后

• 添加

  溢出：隐藏到父元素

• 将

  float

  本身添加到父元素，但这可能会在更高级别元素的高度上产生问题

---

就是这样。我永远不会理解css，但我肯定爱stackoverflow和这个社区！谢谢你的帮助。将尽快将答案标记为解决方案。也许你可以只添加几句话，说明它的工作原理，你添加的内容，。@Michael你可以阅读这篇文章，它将帮助你处理浮动问题，并了解原因和发生的情况：）@Michael还请注意，使用浮动可以提高浮动效果，我建议您阅读有关块格式化上下文的内容，该上下文让您决定如何处理全局布局中的浮动：）OP没有遗漏任何强制分号。您刚刚添加了一些可选项。@Sirko我刚才建议在每个属性后面加上分号是一种很好的做法。：）可能的副本最好对显示效果进行一些解释：）如