css - 垂直 Spring 垫片 CSS

Question

我是堆栈 overflow 的新手。 :-)

如何创建一个自动改变高度的 div 来填满所有空间？我试过
高度:“自动”
但不起作用... :(

例如:

<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

不幸的是，没有一种纯 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 .