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

Question

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

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

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

html, body {
    overflow: hidden;
}

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

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

更新：为 Stackoverflow 提供帮助 - 输入此问题后，立即弹出一个答案。我在包装器上放了一个clearfix，因此由于固定的页脚而不会出现滚动条。更新了我的 jsfiddle 以反映。所以，基本上，我想了解如何让#data div 滚动。

score 0 · Accepted Answer

在内容 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% 属性来匹配主体的高度，并为您的页脚减去 100px。

有关更清洁的示例，请查看类似的答案

1 回答 1