可变高度标题下的可滚动div

Question

我在section元素上无法正确滚动。section元素要么不滚动，要么滚动，但内容或滚动条被推离页面。

http://jsbin.com/EBuNonI/1/edit?html，css，输出

理想情况下，页眉是可变高度的，部分是浏览器的全高，如果需要，它的内容会滚动。正文/页面作为一个整体不应该是可滚动的，只是部分。

问题显然在于高度为100%的部分，因为它将其添加到收割台的可变高度中。如果我去掉100%高度的部分，那么我就失去了滚动。

• 尽量不使用绝对/固定定位(移动应用程序)或JS

• 如果我给收割台一个固定的高度(不理想)，并给出截面填充底部等于固定高度，然后尽管最后一个列表项目是可见的滚动条离开页面。

HTML

<div class="container">
<header>
</header>
<section>
<ul>
<li>First Item</li>
<li>Last Item</li>
</ul>
</section>
</div>

CSS

body, html { height: 100%; }
body { margin: 0; padding: 0; overflow: hidden; }
.container { height: 100%; }
section { 
height: 100%;
overflow-y: scroll; 
}

Answer 1

尝试了一下，这就是我想到的。看看，告诉我你的想法。

HTML:

<div class="container">
<header>Navigation Testing Testing Testing Testing</header>
<section>
<div>
<ul>
<li>First Item</li>
<li>3</li>
<li>Last Item</li>
</ul>
</div>
</section>
</div>

CSS：

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
height: 100%;
width: 30%;
display: table;
}
header {
padding: 24px;
background: blue;
display: table-row;
}
section {
height: 100%;
padding: 24px;
background: tomato;
display: table-row;
}
section div {
overflow-y: scroll;
height: 100%;
}
ul {
margin: 0;
paddding: 0;
}

我用display:table;来实现这一点，这样他们就可以共享高度。

此处演示