具有固定标题的可滚动div内容区域 [英] Scrollable div content area with fixed header
问题描述
对于下面的html，我得到了一个浏览器滚动条，而我希望蓝色内容区域和绿色标题中的滚动条保持固定.尝试过 overflow:auto 没有帮助.我在这里出错了吗?
For the below html I get a browser scrollbar, While I would like a scroll bar in the blue content area and the green header to stay fixed. Tried overflow:auto doesn't help.What am I getting wrong here ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="width: 100%; height: 100%; padding: 0; margin: 0">
<div style="background: green; font-size: 20px; height: 100px">
Header
</div>
<div style="background: blue; overflow: auto;">
<div style="height: 1000px">
content
</div>
</div>
</body>
</html>
推荐答案
You should try something like this: http://jsbin.com/cekahesida/edit?html,css,output
HTML代码应如下所示:
The HTML code should be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="header"></div>
<div class="content">
Some content
<div style="height: 2000px"></div>
Some other content
</div>
</body>
</html>
CSS代码应如下所示:
And the CSS code should be like this:
body {
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
.header {
height: 100px;
background: orange;
}
.content {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background: tomato;
overflow: auto;
}
重点是全屏拉伸 body (通过 width:100vw; 和 height:100vh; ). header 可以正常插入，但是 content 可以通过可选的滚动条(通过 overflow:auto )完全扩展到屏幕的其余部分.
The point is to stretch the body fullscreen (via width: 100vw; and height: 100vh;). The header is inserted normally, but the content is stretched absolutely throughout the remaining of the screen with the optional scrollbar (via overflow: auto).
您只需要注意将 header 的 height 和 content 的 top 设置为相同的高度
You only need to be careful to set the same height of the header and top of the content.
这篇关于具有固定标题的可滚动div内容区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
