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

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

1 个答案:

HTML：

CSS：