Javascript 使用jQuery、CSS或两者来扩展DIV解决方案？

我有一个HTML页面布局-类似于：

<div id='header'>
Header content
</div>

<div id='main_content'>
some content
</div>

标题内容
一些内容

#main_content div中的内容可能很长，或者几乎没有（我将其用作整个站点模板的一部分）

我想要的是它的最小高度是视口的高度（减去上面标题div的高度-但不需要获得该值，为了便于讨论，让我们使用100px）

我似乎无法通过纯CSS来实现这一点。然而，我在想，也许我可以每1秒启动一个Javascript函数（可能在调整大小事件中也会启动它），检查#main_内容的高度，如果不是至少（viewport_hight-100），那么将其设置为（viewport_height-100）

问题是，我不确定这是否可行，也不确定是否有“更好的方法”

有没有人面对过这个问题，并且有一个很好的解决方案

---

谢谢。

不幸的是，这在纯CSS中是不可能的。您将需要使用JavaScript

---

我不确定为什么需要每秒调用JavaScript函数。如果在触发调整大小事件和加载页面时调用它，这就足够了。

可以使用CSS最小高度属性吗？如果需要，您仍然可以使用javascript计算值。

看看这个，我认为它将帮助您：

---

这可以通过CSS和高度=100%来解决。。下面的代码演示。此处的标题高度为25px（适用于所有当前浏览器）：

标题内容
一些内容

感谢您的反馈。以下是我最后所做的工作：

首先，我在Firefox中使用了纯CSS。对于IE，使用了这个jquery脚本（对于一般用途稍微修改）

$（文档）。准备好了吗(
函数（）{
//（我这里还有一些其他不相关的代码）
如果（$j.browser.msie）{setContentHeight（）；}
}
);
函数setContentHeight（）{
//获取视口高度
var viewportHeight=$（窗口）.height（）；
//如果躯干高度不够高，则将其设置为最小高度
if（$（'#body_content_div'）.height（）-275）

在文档加载时，它设置所需的高度

函数每秒被调用1x以说明调整大小和ajax（本可以调用resize（）事件，但这不会说明ajax）

---

因为ajax有时会重新填充一个divwell，我要告诉你们，在做UI的30年里，我从来没有使用过运行计时器来修改布局，我自己也不会这样做，但如果你们高兴的话，天哪

<div id='viewport' style='height:50%; padding-top: 25px; border: 4px solid green'>
    <div id='header' style='margin-top: -25px'>
        Header content
    </div>
    <div id="main_content" style='height: 100%; border: 1px solid red'>
        some content
    </div>
</div>

$(document).ready(
    function () {
        // (I have some other not relevant code here as well in here)
        if ( $j.browser.msie ){ setContentHeight(); }
    }
);

function setContentHeight() {
    // get viewport height
    var viewportHeight = $(window).height();

    // if body div is not tall enough, make it minimum height
    if ( ( $('#body_content_div').height() - 275 ) < viewportHeight ) {
        var desiredHeight = viewportHeight - 275;
        $('#body_content_div').css("height", desiredHeight + "px");
    }

    // set this function to fire off 1x per second
    // because ajax calls may re-populate the div at any time
    setTimeout("setContentHeight()", 1000);
}