如何使用固定页脚获得正确的div溢出?

znemo 发布于 2019-03-09 css 最后更新 2019-03-09 14:36 0 浏览

我创建了一个包含三个主要组件的网站 - 左侧的导航栏,中央内容(分成Title + Data)和页脚。页脚固定在页面的底部。我在这里有JSFiddle示例:http://jsfiddle.net/6Ur89/1/ 我遇到的问题是,我想#data div垂直滚动,当它对于div太大时。我看到的问题是,当发生这种情况时,div只会被推到页脚下面(而不是停在页脚处),直到无限和滚动从不发生。 在我的CSS中,我确实有这个:

html, body {
    overflow: hidden;
}
我把它放在防止水平和垂直滚动条出现(大概是由于页脚)。但是,当我删除这种风格,整个内容div滚动几乎是我想要的(我宁愿标题不滚动...但这不是世界的尽头)。 任何人都可以提出任何我错误的建议吗?再次 - 希望#数据div滚动并停在页脚。我想要一个固定页脚在网站的底部,我不希望页脚创建滚动条。如果您需要澄清,请让我知道。 更新:Yay for Stackoverflow - 输入这个问题后,立即弹出一个答案。我在包装器上放了一个clearfix,因此固定页脚不会出现滚动条。更新我的jsfiddle来反映。所以,基本上,我期待了解如何只有#data div滚动。
已邀请:

nautem

赞同来自:

http://jsfiddle.net/Xsu3Q/ 在内容div中添加了一个padder:

 <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。 有关更清晰的示例,请查看类似的answer