我有一个简单的页面。在这里,我想要一个固定的页眉和固定的页脚,并且内容正文可以滚动。
HTML
<div class="container">
<div class="header">This is Header</div>
<div class="body">This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body</div>
<div class="footer">This is Footer</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
background: #DDD;
}
.header {
width: 100%;
height: 40px;
background: red;
position: absolute;
top: 0;
}
.footer {
width: 100%;
height: 40px;
background: green;
position: absolute;
bottom: 0;
}
.body {
width: 100%;
background: blue;
overflow: auto;
}
但是,当我滚动时,整个页面都会滚动,使我的页眉和页脚移动。 我可以使用 JavaScript 来解决这个问题,获取屏幕的高度并减去页眉和页脚的高度。
但是有什么方法我们可以只使用 css 来实现这一点吗?如果是的话怎么办?
最佳答案
很简单,像这样修改即可
.body {
width: 100%;
background: blue;
overflow: auto;
position: absolute;
bottom: 40px;
top: 40px;
}
关于javascript - 如何在不使用javascript的情况下使内容div可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18812174/