沒有滾動條的 100% Div 高度

Question

我有一個兩列布局：

<html>
 <head></head>
 <body>

    <div id="container">
        <div id="header"></div>
        <div id="sidewrapper"></div>
        <div id="contentwrapper"></div>
    </div>
 </body>
</html>

我希望側邊欄和內容的高度均為 100%，但最頂部容器的最小高度應為 100%。

我試圖用以下 css 解決它：

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: Georgia, serif;
    color: #000; height:100%; min-height:100px;
}

body {
    background: #fff; height:100%; min-height:100px; overflow:hidden;   
}

#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}

#container {
    position:relative;
    width: 100%; height:100%;
    margin: auto; background:blue;
}

#contentwrapper {
    float:left;
    background:red;
    position: relative;
    width: 700px; padding:0px; margin:0px;
    height: auto; 
}

#sidewrapper {
    float:left;
    position: relative;
    width: 159px; height:100%; 
    padding:0px; margin:0px;
}

...但由於標題的 23px 高度，我得到了一個滾動條。 我試圖用 overflow:hidden for body 元素解決它，但我不知道這是否是正確的解決方案。

有任何想法嗎？

Answer 1

如果我在我對這個問題的評論中提出的假設是正確的，那么sidebar是100%高，最重要的是你有一個23px標題，所以你的容器要高100% + 23px 。

將來你會在css calc() http://hacks.mozilla.org/2010/06/css3-calc/中找到。 這將解決您的問題。

現在，我猜您應該通過javascript計算側邊欄的高度（=容器的高度 - 23px）。

Answer 2

使#header位置絕對。 這將使該塊從正常流量中切除，並且您將能夠使其他塊的高度等於其父級。

#header {
    position: absolute;
    width: 100%; height: 23px;
    top: 0; left: 0;
}
#sidewrapper,
#contentwrapper {
    float: left;
    width: 50%;
    height: 100%;
}
#sidewrapper .content,
#contentwrapper .content {
    margin-top: 23px;
}

Answer 3

將元素的高度與其父元素進行比較。 在您的情況下，我建議您為“containter”指定具體的寬度和高度，因為很難在許多機器上假裝屏幕的大小。

如果您堅持使用百分比，我建議您使用兩個元素，例如標題25％高度和內容75％高度。

Answer 4

假設我有一個 html 正文和一個 div，我想讓 div 的高度與整個瀏覽器一致，而沒有滾動條和側邊間隙。 然后理解下面的例子，自己實現。

網址：

<body>
<div id="yellowDiv">
<div>

</body>

CSS：

body{
margin:0px;
}

yellowDiv{
background-color:yellow;
height:100vh;
}

沒有滾動條的 100% Div 高度

問題描述

4 個解決方案

解決方案1
7 已采納 2010-11-25 08:28:30

解決方案2
5 2010-11-25 08:52:23

解決方案3
1 2010-11-25 08:29:30

解決方案4
0 2021-12-30 06:27:35

沒有滾動條的 100% Div 高度

問題描述

4 個解決方案

解決方案1 7 已采納 2010-11-25 08:28:30

解決方案2 5 2010-11-25 08:52:23

解決方案3 1 2010-11-25 08:29:30

解決方案4 0 2021-12-30 06:27:35

解決方案1
7 已采納 2010-11-25 08:28:30

解決方案2
5 2010-11-25 08:52:23

解決方案3
1 2010-11-25 08:29:30

解決方案4
0 2021-12-30 06:27:35