Question

对于下面的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>

Answer 1

这是您寻找的一个很好的例子。 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;
  }

Answer 2

你必须给你的蓝色背景div一个固定的高度。

<div style="background: blue; overflow: auto; height:350px;">

Jsfiddle示例：https://jsfiddle.net/jagrati16/ennj1xu3/

具有固定标题的可滚动div内容区域

2 个答案: