[英]How to make the content div scrollable without using javascript
我有一个简单的页面。 在这里,我希望固定的页眉和固定的页脚以及内容的主体是可滚动的。
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;
}
尝试将CSS用作:
.body {
width: 100%;
background: blue;
overflow: scroll !important;
}
将溢出设置为scroll
并将.header
和.footer
位置设置为fixed
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.