对于下面的html我得到一个浏览器滚动条,虽然我想在蓝色内容区域中的滚动条和绿色标题保持固定。尝试overflow:auto
没有帮助。我在这里出错了什么?
<!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>
答案 0 :(得分:0)
这是您寻找的一个很好的例子。 https://jsfiddle.net/letalumil/zVzD6/
<html>
<header>
</header>
<body>
<div id="wrapper">
<div>header</div>
<div id="content">
<div class="scroll">
<div class="temp">content</div>
</div>
</div>
</div>
</body>
</html>
你的css
html, body {
height: 100%;
}
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
}
#content {
position: relative;
background: green;
}
#content:after {
content:'';
display: block;
clear: both;
}
.scroll {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
.temp {
height: 1000px;
}
答案 1 :(得分:0)
你必须给你的蓝色背景div一个固定的高度。
<div style="background: blue; overflow: auto; height:350px;">
Jsfiddle示例:https://jsfiddle.net/jagrati16/ennj1xu3/