javascript - CSS 专栏恶魔 : a sticky div with an auto-stretching div in between it?

Question

首先我应该说我已经研究过这个问题。我找不到任何相同的问题或可以满足我要求的问题。

我希望能够在页面的左下角放置一些内容，然后在其上方有一个 div，它会自动拉伸(stretch)自身以使用页面顶部和底部内容之间的所有空间离开，即使用户调整窗口大小时。

请看下图。

我用 position: absolute; 定位左下角的内容； bottom: 10px;，有效。那么我最好让它上面的 div 自动拉伸(stretch)以填补大的空白(即):

[stretchy_div_height] = [100%] - [height_of_bottom_div] - [bottom_div_margin]。

理想情况下，如果可能的话，我希望在没有 JavaScript 的情况下执行此操作。但无论哪种方式都可以。我不能为高度拉伸(stretch)的 div 使用假列(我需要一直向下的真实内容)。

谢谢!

这是我想要实现的目标的图片:

Answer 1

参见:http://jsfiddle.net/zSeLS/

CSS:

html, body {
    margin: 0;
    padding: 0
}
#left {
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 60px;
    width: 120px;
    background: #ccc
}
#leftButton {
    position: absolute;
    left: 10px;
    bottom: 10px;
    height: 40px;
    width: 120px;
    background: #f0f
}

#content {
    margin: 10px 10px 10px 140px;
    background: #999
}

HTML:

<div id="left"></div>
<div id="leftButton"></div>

<div id="content">
    some content<br />
    ..
</div>