可变高度标题下的可滚动 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