如何垂直放置两个div,其中顶部的剩余高度？

Question

标记如下: -

<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/

Answer 1

Flexbox布局非常简单.在这种情况下,您不必height为底部指定显式<div>,顶部将显示剩余空间:

这里的例子

#parent {
    /* other declarations... */

    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.top {
    overflow: auto; /* Up to you! */
    flex: 1;
}

看看这些属性:

• flex
• flex-direction