100％的高度不起作用？

Question

+----------------------+
|          1           |
|                      |
+----------------------+
|       |              |
|   2   |              |
|       |              |
|       |      4       |
+-------|              |
|    3  |              |
|       |              |
+----------------------+

如上圖所示，（1）我需要添加一些標題內容，（2）向左導航，（3）2內的某些內容到3的中心，但由於4而不清楚高度，（4）較大的內容。 因此，我需要指定height: 100%; 但不起作用。 怎么做？

編輯

<div id="wrap">
<!--contents of (1)--> 
</div>
<div id="wrap">
<div id="left-nav">
<!--contents of (2)-->
<div id="someid">
<!-contents of (3)-->
</div>
</div>
<div id="main">
<!--contents of (4)-->
</div>
</div>

主要的CSS我想使用背景（2）和（3）相同，背景（4）不同。

#left-nav{width: 200px; background-color: red; height: 100%;}

按下此鏈接 ，我想給紅色邊框加紅色邊框的height: 100%;

Answer 1

很高興看到問題的全部:)

演示： JSFiddle

當您擁有動態內容並且不知道頁面的height ，不應設置height屬性，因為height會將其相對於父級（或窗口）的高度進行設置。 同樣，我們希望尺寸是動態的！ 因此，請勿設置height屬性。

我認為這個問題可以改寫為：

問： 僅使用CSS，如何才能使動態區域具有相同的高度？

簡單地說，您不能 。 但是，您可以使它們看起來具有相同的高度。

這是一個純CSS實現，在<IE8中可能看起來不太正確。 我將擴展@Adam的答案 。

1. 將側邊欄元素包裝到新的div（ #sidebar ）中，然后再次float: left 。

2. 設置#wrap { overflow: auto } ，這將允許#wrap擴展到包含#sidebar ，如果它變得比#main高。 （資源）

3. 設置#sidebar { width: X }和#main { padding-right: X } 。 這將使它這樣#main方面對將由采取了左側區域#sidebar的背景。

4. 最后一部分是設置#sidebar和#main的背景。 我們將通過設置兩個背景圖像來做到這一點： #wrap { background: url('image1') repeat-y, url('image2') X 0 } ，其中X是側邊欄的寬度。 確保圖像與邊欄的寬度相同，並且僅在y方向上重復。 第二張圖片將在邊欄右側偏移，並平鋪以填充#wrap其余背景。

由於#sidebar和#main都沒有設置高度，因此它們可以隨內容的增長而自由擴展。 我們修復了#wrap將其擴展到浮動的#sidebar的高度，由於它只是一個普通的block元素，因此通常會擴展到覆蓋#main的高度。 由於背景設定為#wrap ，我們給的外觀 ，這兩個孩子都是相同的高度父。

HTML （添加了#sidebar ）

<div id="header">1</div>
<div id="wrap">
    <div id="sidebar">
        <div id="left-nav">2</div>
        <div id="someid">3</div>
    </div>
    <div id="content">4</div>
</div>

CSS

注意：<IE8，多個圖像將不起作用。 您還可以設置顏色#main ，但它不會擴展到的高度#wrap如果#sidebar比更高 #main 。

#wrap {
    background: url('image1') repeat-y, 
                url('image2') X 0;
    overflow: auto;
}
#sidebar {
    float: left;
    width: X;
}

#main {
    margin-left: X;
}

Answer 2

當您將某項設置為100％時，它就是父元素的100％。 那么父元素的高度是多少？ 如果未將其設置為某個值，那么您可能無法獲得期望的結果。 如果將父級設置為100％，請問自己：“ 100％是什么？父級設置為什么？” 在您獲得有價值的東西（可能只是視口和html元素的大小）之前，百分比不會給您提供大小。

Answer 3

我已經解決了我的問題.....

#left-nav{position: absolute; width: 329px; height: 100%;}
#someid{height: 70%; bottom: 0;}

但是仍然建議適當的解決方案。

Answer 4

您需要使用equalizeCols（一個jQuery插件）來使兩列具有相同的高度

-要么-

通過將3和4包裹在容器div中，並在左側給出具有不同顏色/圖案的背景圖像（可以在整個內容高度重復y），來模擬左欄的外觀。 說得通？