javascript - 拉伸(stretch) div 但不是整个页面

Question

我有一个动态高度的框架。
在其中，我有 3 个部分，其中之一是内容部分。

我想将内容的边缘固定到与框架的恒定距离。

这里是 a fiddle to reproduce the issue .我在 fiddle 中使用 jquery-ui-dialog 只是因为它在重现问题时更容易使用。该解决方案不能涉及 jquery-ui-dialog 特定代码。不过它可以使用 jquery 和 jquery-ui。

CSS 解决方案(如果存在)是更可取的。

Answer 1

定位元素更容易解决您描述的问题。例如，您可以使用 position:absoulte。然后使用 top、right、bottom 和 left 属性，您可以将元素定位在需要的位置。这是一个示例 CSS:

#content {
    border: 1px solid blue;
    bottom: 34px;
    top: 34px;
    left:10px;
    right:10px;
    position: absolute;
}
#footer {
    border: 1px solid green;
    bottom: 10px;
    left:10px;
    right:10px;
    position: absolute;
}

演示: http://jsfiddle.net/BV5Z6/4/