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 layout这非常简单。在这种情况下，您不必为底部height指定明确的<div>，最上面的将占用剩余空间：

<强> EXAMPLE HERE

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

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

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

查看这些属性：

Answer 2

你必须位置 div.bottom 绝对并设置div.top 高度 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/

祝你好运！

Answer 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相关黑客攻击代码。

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

3 个答案: