div 的高度不会随内容增长答案

【问题标题】：div doesn't grow in height with contentdiv 的高度不会随内容增长
【发布时间】：2020-05-16 20:52:51
【问题描述】：

我已经阅读了这个论坛上几乎所有关于 div 及其内容的高度增长的文章。我不明白我做错了什么，也无法弄清楚。可能这是一件容易的事，但我只是不再看到它了。

我尝试了以下 CSS，但无法正常工作：

clear:both;
float: left;
overflow: auto;
overflow: hidden;

所有这些都没有所需的输出。

我在 jsfiddle 上发布了我的代码：http://jsfiddle.net/eAVy3/

您会看到我的页脚（红色）位于顶部而不是底部。获得看起来像的东西的唯一方法是给 id page_container 一个高度。但这将是一个固定的高度，不会随内容增长。该怎么做才能做到这一点？

【问题讨论】：

认为有必要阅读一下absolute定位：designshack.net/articles/css/…
bodycontainer 1 和 2，我猜你想并排运行的都是 1000px 宽，在 1000px 宽的 div 内。肯定他们每个人应该是 500 人？
@Michael：不，它们应该在彼此下方！那太好了！ Rich 的回答解决了我的问题！

标签： html css height

【解决方案1】：

在这里工作：http://jsfiddle.net/eAVy3/3/

绝对定位（绝对定位使 div 脱离了文档的正常流程，这意味着它不会影响页面上的其他内容，例如页脚）..

您需要浮动您的 div：

#kolom_links {
  float: left;
  margin-left: 100px;
}

#kolom_rechts {
  float: left;
  margin-left: 70px;
}

现在因为 #page_container 中的两个 div 都是浮动的，你需要使用 clearfix css:

添加类 clearfix：<div id="page_container" class="clearfix">

然后将此 clearfix 添加到您的 CSS：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

【讨论】：

并在最后一次浮动后立即清除它们...
我不需要
。它仅适用于 Rich! 的 CSS 添加！ Tnx男人！我知道 HTML 不是那么好，但它已经 3 年了，做一些 CSS 比重建它更容易！

【解决方案2】：

您应该重新考虑将位置设为绝对；使位置成为绝对位置会使元素不流动，因此它们不会占用文档的任何高度或宽度。改变位置：相对；你会开始想办法的

更新 2

试试这个：

    #kolom_links {
width: 400px;
height: auto;
padding-left: 10px;
}

【讨论】：

【解决方案3】：

这是一个简单的 CSS 问题：默认情况下，容器不会环绕浮动内容。实现它的最简单方法是，

.div_container {
  overflow: hidden;
}

【讨论】：