CSS - 具有100％最小高度的內容創建一個垂直滾動條

我試圖創建一個帶有導航菜單和填充頁面其餘部分的內容區域的頁面，內容有100％min - 高，但即使它是空的，它會顯示垂直滾動條，因爲標題大小。CSS - 具有100％最小高度的內容創建一個垂直滾動條

HTML相關部分：

<body> 
    <div id="header">Davi Andrade</div> 
    <nav> 
    <ul> 
     <li><a href="/">About</a></li> 
     <li><a href="/">Portfolio</a></li> 
     <li><a href="/">Downloads</a></li> 
     <li><a href="index.html">Home</a></li> 
    </ul> 
    </nav> 
    <div id="content"> 
    Text 
    </div> 
</body>

而CSS：

html, body { 
    background: #333333; 
    font-family: "Segoe UI", "Lucida Grande", sans-serif; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#header { 
    color: #b6b6b6; 
    float: left; 
    font-family: Megrim; 
    font-size: 36px; 
    margin: 18px 52px 18px 52px; 
    text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5); 
    text-transform: uppercase; 
} 

nav li a { 
    color: white; 
    display: block; 
    float: right; 
    font-size: 1.3em; 
    list-style: none; 
    padding: 24px 48px 24px 0; 
    text-decoration: none; 
} 

#content { 
    clear: both; 
    background: #3e3e3e; 
    box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3); 
    min-height: 100%; 
}

有什麼辦法解決這一問題？

來源

2012-01-14 Davi

它看起來好像沒什麼問題在Chrome和FF ...你的意思是下面的淺灰色區域有自己的滾動條，還是你說的內容區域太大，從而產生正常的滾動條？ – mcallinder 2012-01-14 17:03:41

看看這個http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space – 2012-01-14 17:13:25

內容區域太大，它應該只在需要時才顯示滾動條。。 – Davi 2012-01-14 17:14:30

取決於你正在努力實現，這種佈局可以通過以下兩種方式之一來實現。

首先，如果你沒有在頁面底部需要什麼，那麼你應該只是刪除min-height和background-color關閉#content並放置在body而不是background-color。我也改變標題HTML結構稍微做了一點語義上更正確，更容易使用：

HTML

<div id="header"> 
    <h1>Davi Andrade</h1> 
    <nav> 
     <ul> 
      <li><a href="/">About</a></li> 
      <li><a href="/">Portfolio</a></li> 
      <li><a href="/">Downloads</a></li> 
      <li><a href="index.html">Home</a></li> 
     </ul> 
    </nav> 
</div> 
<div id="content"> 
    .... 
</div>

CSS

/* change original #header to h1 and add the following CSS */ 
#header { 
    background: #333333; 
    overflow: hidden; 
} 

/* remove back ground color from #content and add here */ 
html, body { 
    .... 
    background-color: #3e3e3e; 
    .... 
}

其次，如果你確實需要頁面底部的頁腳，然後你需要進行上面的修改，然後用min-height: 100%將你的HTML包裝在一個容器元素中。然後，您可以使用position: absolute將頁腳元素放置在容器元素的底部。還有其他一些零碎的東西，我已經在this Stackoverflow answer中更詳細地解釋過了。

隨着頁腳：http://jsfiddle.net/cNfWZ/1/

沒有頁腳：http://jsfiddle.net/cNfWZ/

來源

2012-01-15 20:51:24

不是說它會產生巨大的差異，但你混淆了你的兩個鏈接。雖然很好的答案。 – 2015-11-23 14:54:57

@ Aiyion.Prime - 謝謝，我已經更新了我的答案 – 2015-11-24 09:42:08