可变高度标题下的可滚动div
可变高度标题下的可滚动div
提问于 2014-01-17 12:34:16
我很难在区段元素上得到正确的滚动。节元素要么不滚动，要么滚动，但是内容或滚动条被从页面上推开。
http://jsbin.com/EBuNonI/1/edit?html,css,output
理想情况下，标题是可变高度，该部分是浏览器的全部高度，如果需要，它的内容会滚动。但是，主体/页面作为一个整体不应该是可滚动的，而应该是部分。
这个问题显然存在于高度为100%的部分，因为它将其添加到标头的可变高度中。如果我拿走了100%高的部分，那么我就失去了卷轴。
- 尽量不使用绝对/固定定位(移动应用程序)或JS
- 如果我给标头一个固定的高度(不理想)，并给部分填充-底部等于固定的高度，那么尽管最后的列表项目是可见的，滚动条离开页面。
<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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-17 12:47:48
做了一点，这就是我想出来的。看看，告诉我你怎么想的。
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21186179
复制相关文章
相似问题
腾讯云开发者
