我本质上是想在我的页面中创建一个框架。这是fiddle .
html,body{
width:100%;
height:100%;
}
#container{
width:100%;
height:100%;
position: fixed;
}
#navigation{
min-height:100%;
overflow-y: auto;
}
ul {
background-color: red;
}
<h1>Hello</h1>
<div id="container">
<div id="navigation">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
</div>
我想要Hello
block 保留在顶部,并且带有红色背景的 div 为:
- 占据整个剩余高度。
- 如果内容溢出,则可滚动。
即使找到了许多类似的主题(其中大多数建议使内部内容具有 min-height: 100%;
),我的尝试仍然不成功。
我正在尝试使用 position: fixed; height: 100%;
创建一个容器并将我的可滚动区域放入 min-height: 100%; overflow-y: auto;
中。再说一次,这不起作用。
浏览器支持:IE9+
最佳答案
CSS3 和 flex
* {margin: 0;}
html,body {height: 100%;}
body {
display: flex;
flex-flow: column;
}
#container {
overflow-y: auto;
flex: 1;
background: gold;
}
<h1>Hello</h1>
<div id="container">
<p style="height:2000px;">TALL DEMO</p>END
</div>
CSS 和显示表格/行
* { margin: 0;}
html,body {height: 100%;}
body {overflow: hidden;} /* Fix appearing scrollbar in FF*/
.table {
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
#row2 {
height: 100%; /* occupy max height available */
}
.scrollable {
position: relative;
overflow-y: auto;
height: 100%;
background: gold;
}
<div class="table">
<div class="row" id="row1">
<h1>Hello</h1>
</div>
<div class="row" id="row2">
<div class="scrollable">
<p style="height:2000px;">TALL DEMO</p>END
</div>
</div>
</div>
关于html - 占据页面剩余高度的可滚动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32994214/