Question

我有一个HTML页面布局 - 如下所示：

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

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

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

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

我似乎无法通过纯CSS来做到这一点。但是，我想也许我可以每1秒启动一次Javascript函数（并且可能也会在resize事件中触发它），检查#main_content的高度，如果它不是至少（viewport_hight - 100），那么将它设置为（viewport_height -100）。

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

有没有人遇到过这个问题并有一个很好的解决方案？

感谢。

Answer 1

不幸的是，纯CSS无法实现这一点。您需要使用JavaScript。

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

Answer 2

你能使用CSS min-height属性吗？如有必要，您仍然可以使用javascript计算值。

Answer 3

看看这个，我想它会对你有所帮助： http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 4

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

<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>

Answer 5

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

我用过纯粹的CSS for Firefox。对于IE，使用此jquery脚本（稍微修改为通用）

$(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);
}

在文档加载时设置所需的高度
函数每秒调用1次来调整大小和ajax（可能调用resize（）事件，但这不会占用ajax。

使用jQuery，CSS或Both扩展DIV解决方案？

5 个答案: