Question

我有两个div，bottom上的内容扩展到最高。{1}}该页面的高度/宽度为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高度，则底部为{{1} }}，top需要200

Answer 1

如果你想使用纯CSS，有没有理由拥有一个顶级div？

<强> Check This JSFiddle Demo

在这个演示中，您可以看到没有顶部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);

<强> Check JSFiddle Demo

Div填充剩余高度

1 个答案: