Question

我几乎阅读了本论坛上关于div和增长高度的每篇文章及其内容。我不明白自己做错了什么，无法弄明白。可能这很容易，但我再也看不到了。

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

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

这一切都没有所需的输出。

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

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

Answer 1

你应该重新考虑使这个位置绝对; 使位置绝对是使元素不流动，因此它们不占据文档的任何高度或宽度。改变到位置：相对;你将开始想出来

更新2

试试这个：

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

Answer 2

在这里工作小提琴：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 */

Answer 3

这是一个简单的CSS问题：默认情况下，容器不会包装浮动内容。做到这一点的最简单方法，

.div_container {
  overflow: hidden;
}

div不会随着内容的增长而增长

3 个答案: