标记类似于:
<div id="parent">
<div class="top">
<ul>
<li>...
</ul>
</div>
<div class="bottom">
<ul>
<li>Option A
<li>Option B
<li>Option C
</ul>
</div>
</div>
CSS是:
div {
border: 1px solid black;
}
#parent {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.top {
max-height: 200px;
overflow: scroll;
}
因此,基本上我想要的是bottom
div
应该接触到窗口的下边缘,并且剩余空间应该由占据top
div
。我目前设置的方法max-height
在top
div
显然不是好的,因为根据屏幕大小(在手机上),这将是要么太少或大。我只能使用CSS来实现吗?
这是为此的jsfiddle- http://jsfiddle.net/Ldr07h2r/
使用Flexbox布局,这非常简单。在这种情况下,您不必height
为底部指定显式<div>
,顶部的将占用剩余空间:
#parent {
/* other declarations... */
display: flex;
min-height: 100vh;
flex-direction: column;
}
.top {
overflow: auto; /* Up to you! */
flex: 1;
}
看一下这些属性:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句