如何使用固定页脚为正确的 div 获得正确的溢出？答案

【问题标题】：How to get correct overflow for proper div with fixed footer?如何使用固定页脚为正确的 div 获得正确的溢出？
【发布时间】：2013-04-11 16:14:40
【问题描述】：

我正在创建一个包含三个主要组件的网站 - 左侧的导航栏、中心内容（分为标题 + 数据）和页脚。页脚固定在页面底部。我在这里有 JSFiddle 示例：http://jsfiddle.net/6Ur89/1/

我遇到的问题是，当#data div 对于 div 来说太大时，我希望它垂直滚动。我看到的问题是，当这种情况发生时，div 只会被推到页脚下方（而不是在页脚处停止），直到无穷大并且永远不会发生滚动。

在我的 CSS 中，我确实有这个：

html, body {
    overflow: hidden;
}

我放入它是为了防止出现水平和垂直滚动条（可能是由于页脚）。但是，当我删除此样式时，整个内容 div 滚动，这几乎是我想要的（我希望标题不滚动……但这不是世界末日）。

任何人都可以提供任何我哪里出错的建议吗？再次 - 希望#data div 滚动并在页脚处停止。我想在网站底部有一个固定的页脚，我不希望页脚创建滚动条。如果您需要澄清，请告诉我。

更新：对 Stackoverflow 赞不绝口 - 输入此问题后，立即弹出一个答案。我在包装器上放了一个 clearfix，因此由于固定的页脚，滚动条不会出现。更新了我的 jsfiddle 以反映。所以，本质上，我希望了解如何仅让#data div 滚动。

【问题讨论】：

我想你只需要给#data div添加一个设定的高度
@DavidStetler - 你的意思是像素高度吗？如果我不知道怎么办（因为在 y 方向上分辨率更高的显示器会有更多像素）。还是我错了？
您可以使用 JavaScript 设置高度，基于窗口大小减去页眉和页脚。可能有更好的纯 CSS 解决方案，但我不知道。
所以你不想做这样的事情：jsfiddle.net/399Ek 并让浏览器滚动条用于滚动？
另外，我做了一些研究，试图找到一个解决方案，在没有设定高度的情况下滚动 y，这几乎是不可能的。如果你想让它只是让数据 div 滚动，你需要使用 javascript 来获取高度并设置它。

标签： css

【解决方案1】：

http://jsfiddle.net/Xsu3Q/

在内容 div 中添加了一个填充器：

 <div id="content">
    <div class='padder'>
    <div id="title">title</div>
    <div id="data">Lots of data...

.padder {padding-top: 100px;}

将内容移出框架100px：

#content {
position: relative;
top: -100px;
margin-left: 350px;
height: 100%;}

这样就可以使用height:100%属性来匹配body的高度并为您的页脚减去 100 像素。

如需更简洁的示例，请查看类似的 answer

【讨论】：