html - 可变高度标题下方的可滚动 div

Question

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

http://jsbin.com/EBuNonI/1/edit?html,css,output

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

问题显然出在高度为 100% 的部分，因为它将它添加到标题的可变高度。如果我拿走 100% 高度的部分，那么我就失去了卷轴。

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

• 如果我给页眉一个固定的高度(不理想)并给该部分padding-bottom 等于固定高度然后虽然最后一个列表元素可见滚动条离开页面。

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; 使这成为可能，这样它们共享高度。

DEMO HERE