CSS:在具有页眉和页脚的固定大小容器中，用可滚动窗格填充可用大小

Question

在我的场景中，我有一个<div>元素，它在窗口上的固定位置具有以下css属性：

position: fixed;
height: 80%;
width: 30%;
top: 50px;
left: 0;

我的要求是能够在<div>中放置页眉和页脚，并在剩余的空间中填充一个元素，如果需要，该元素有一个滚动条可以垂直滚动其内容。

我如何才能以与Chrome、Mozilla和InternetExplorer/Edge兼容的方式做到这一点？

Answer 1

使用flexbox(可能不适用于百分比高度和固定位置(：

#wrapper {
display: flex;
flex-direction: column;
height: 100px;
width: 30%;
margin-top: 50px;
}
#content {
flex: 1;
overflow-y: scroll
}

<div id="wrapper">
<header>A header</header>
<div id="content">
yo<br /> <br /><br /> yo<br /><br /> <br /><br />yo<br /><br /><br /><br /><br /> <br /><br /> <br />yo
</div>
<footer>A footer</footer>
</div>

Answer 2

如果需要，可以使用overflow-y: auto显示垂直滚动条。

div{
overflow-y: auto;/*will show vertical scrollbar if necessary*/
}
.header{
position: absolute;
width: 100%;
height: 10%;
border: 1px solid blue;
}
.footer{
position: fixed;
width: 100%;
bottom: 5px;
width: 30%;
height: 10%;
border: 1px solid blue;
}

<div style="position: fixed; height: 80%; width: 30%; top: 50px; left: 0; border: 1px solid black;">
<div class="header">Header</div>
<p style="margin: 25px;"/>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<div class="footer">Footer</div>
</div>