如何将两个 div 垂直放置在顶部一个占据剩余高度的位置？答案

【问题标题】：How do I position two divs vertically where the top one takes the remaining height?如何将两个 div 垂直放置在顶部一个占据剩余高度的位置？
【发布时间】：2014-09-13 18:13:40
【问题描述】：

标记是这样的：-

<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 占用。我目前在top div 中设置max-height 的方法显然不好，因为根据屏幕尺寸（在手机上）它会太小或太大。我可以只使用 CSS 来实现吗？

这是一个 jsfiddle - http://jsfiddle.net/Ldr07h2r/

【问题讨论】：

标签： html css flexbox

【解决方案1】：

Flexbox layout 非常简单。在这种情况下，您不必为底部的 <div> 指定显式的 height，顶部的会占用剩余空间：

EXAMPLE HERE

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

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

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

看看这些属性：

【讨论】：

谢谢，这是我需要的。
一个问题。为什么使用100vh 而不是100%？
@AppleGrew 通常，height 的百分比值是相对于盒子包含块的高度的，它可能与视口的高度相关，也可能不相关；但是通过使用vh 视口百分比长度，元素肯定会占用视口的高度。然而，在这种 #parent 绝对定位的特殊情况下 - 即 fixed - ，我们可以避免使用 height 和/或 min-height 属性，而是使用 top: 0; bottom: 0; 声明来代替它们视口的整个高度：Updated Demo.
我总是对flexbox 解决这类布局问题的轻松程度感到惊讶。
赢家！非常感谢！

【解决方案2】：

您必须定位 div.bottom absolute 并设置 div.top height 100% - div.bottom。

你的最终 CSS 必须是：

div {
    border: 1px solid black;
}

#parent {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.top {
    height: calc(100% - 100px);
    overflow: scroll;
}
.bottom { 
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
}

这是更新后的小提琴：http://jsfiddle.net/Ldr07h2r/4/

祝你好运！

【讨论】：

如果他的 OP 不想要底部 div 的固定大小怎么办？？
我不知道怎么做，请随时编辑我的帖子。
谢谢，但在其他语言中，文本可能会换行，所以我无法设置固定高度。 +1 为需要支持他们的不幸灵魂提供可以在 IE8 和 9 中工作的解决方案。

【解决方案3】：

这里有个小秘密：只需在父元素上使用渐变...

#parent {background: linear-gradient(to right, rgba(238, 238, 238, 0) calc(100% - 370px), rgba(238, 238, 238, 1) calc(100% - 360px)) repeat scroll 0 0 rgba(0, 0, 0, 0);}

...而且您不必为height 相关的hack 弄乱您的代码。

【讨论】：