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