Div伸展範圍內的部門

我正在設計一個網站，並在此刻進行一系列的造型設計。它有一個3列布局（兩個大內容列，一個小的導航欄）和一些「包裝」divs，目的是爲了美觀。該HTML看起來是這樣的：Div伸展範圍內的部門

<div id="out_wrapper"> 
    <div id="in_wrapper"> 
     <div id="nav"> ... content ... </div> 
     <div class="column"> ... content ... </div> 
     <div class="column"> ... content ... </div> 
    </div> 
</div>

每個div的區域寬度固定的，但我想他們是可變的高度來考慮的內容量增加。我希望in_wrapper和out_wrapper的高度比它們包含的div大一些，我似乎無法使它工作。我試過設置min-height而不是height，並且完全刪除了height屬性，但我永遠無法獲取in_wrapper或out_wrapper以擴展到內容。列伸展得很好。

另外，我可以設置溢出爲自動並允許滾動，這將保持網站在一個固定的大小，但這似乎是不太理想的結果。

該網站使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">按要求，如果這有所作爲。

來源

2011-02-01 KChaloux

你在out_wrapper設置填充和in_wrapper？ – bleepzter 2011-02-01 22:48:04

很多很多類似的問題：[1]（http://stackoverflow.com/questions/1065408），[2]（http://stackoverflow.com/questions/992073/），[3]（http：// stackoverflow.com/questions/2627768/）。您還應該看看所有解決此問題的960.gz，Blueprint和麪向對象的CSS框架。 – 2011-02-01 22:52:43

將兩個包裝的高度設置爲auto並在底部添加填充。另外，overflow:hidden如果孩子是漂浮的。

#out_wrapper, #in_wrapper { height:auto;padding-bottom:10px;overflow:hidden;}

來源

2011-02-01 22:50:14 Stephen

非常好。像魅力一樣工作！只要SE讓我接受這一點。 – KChaloux 2011-02-01 22:57:11

您是否嘗試過在所有列之後添加清零的div？像

<div style="clear:both"></div>

這將拉動容器下降到總高度。然後添加一些邊距和/或填充以創建額外的空間。

來源

2011-02-01 22:50:30

雖然這*會*解決浮動元素周圍的容器，這是不必要的標記。容器只需要在CSS中應用`overflow：hidden`。 – Stephen 2011-02-01 22:52:48

如果一個父標籤沒有延伸到包圍一個子標籤，那麼這個孩子很可能已經從文檔的正常流程中取出（通過浮動或定位）。 您需要將孩子帶回。有幾種方法可以做到這一點：

將樣式overflow:auto添加到元素浮動的容器元素。

添加非語義「更清晰」的div浮動的內容後：<div style="clear:both"></div>

使家長定位的元素，以及：position:relative;

來源

2011-02-01 22:54:12 Moses

Div伸展範圍內的部門

回答

相關問題