Question

我是堆栈溢出的新手。： - ）

如何创建一个自动更改高度的div来填充所有空间？我试过用 height:"auto"
但是不起作用...... :(

例如：

<div style="height:300px">
    <div style="height:50px">...</div>
    <div>The height of this div varies from page to page...</div>
    <div style="height:???">SPROING!!</div>
    <div style="height:50px">...</div>
</div>

编辑这个例子以更好地满足我的需要。

感谢。

Answer 1

好吧，如果你有一个容器div（就像那里的例子那样），你可以将它设置为一个固定的高度（例如，250px）。但是如果你不知道div容器的高度，但确实知道它的兄弟容器的高度，你可以尝试将高度设置为100％并给它填充上面和下面div的高度。

Answer 2

不幸的是，没有一种纯粹的CSS方法可以做到这一点，因为你要做的是：

spring height = parent height - n children's height

你可以通过一些jQuery很容易地做到这一点：

<强>标记

<div id="parent">
    <div id="top">...</div>
    <div id="spring">SPROING!!</div>
    <div id="bottom">...</div>
</div>

<强>的jQuery

var leftover = $('#parent').height() - $('#top').height() - $('#bottom').height();
$('#spring').height(leftover);

在action here。

垂直弹簧垫片CSS

2 个答案: