div 的高度不會隨着內容而增長

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">

然后將此清除修復添加到您的 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;
}