Div填充剩余高度

Div fill remaining height

本文关键字：高度 余高度 填充 Div      更新时间：2023-09-26

我有两个div，bottom上的一个内容扩展得最高。页面为100%高/宽position absolute

<style>
    body, html { height:100%, width:100% }
    .page { position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0}
    .bottom { position absolute; bottom: 0; right: 0; left: 0; }
    .top { position absolute; bottom: 0; right: 0; left: 0; }
</style>

我怎么能让顶部的div转换底部的div剩下的任何页面，所以如果window是600高度，底部取400，顶部取200

如果你想使用纯CSS，有什么理由拥有顶级div吗？

检查此JSFiddle演示

在这个演示中，您可以看到，如果没有顶部div，您可以在底部粘贴一个div，父div填充剩余的空间。

HTML:

<div class="page">
    this is top
    <div class="bottom">
        This is a text
        <br/>
        In order to expand the bottom
        <br />
        blah blah
        <br />
        blah blah blah
        <br />
        blah blah blah blah
    </div>
</div>

CSS：

body, html { height:100%, width:100% }
.page { position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0; background-color:green}
.bottom { position: absolute; bottom: 0; right: 0; left: 0; background-color:red}



更新：

但是，如果你必须创建一个填充剩余高度的顶部div，它认为没有使用纯CSS的交叉浏览解决方案，但你可以使用一个简单的JQuery代码。

假设你有这个HTML:

<div class="page">
    <div class="top">
        this is top
    </div>
    <div class="bottom">
        This is a text
        <br/>
        In order to expand the bottom
        <br />
        blah blah
        <br />
        blah blah blah
        <br />
        blah blah blah blah
    </div>
</div>

所以使用这个JS:

function setHeight() {
    $(".top").height($(".page").height() - $(".bottom").height());
}
$(document).ready(setHeight);
$(window).resize(setHeight);

检查JSFiddle演示

相关文章：