Question

在我从几位成员那里得到一些帮助之后，建议解决我的问题： DIV "100%" height, stretch from top DIV to bottom footer to accommodate background 是JavaScript / jQuery，我在网上发现了一些东西：

http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/

但是，我需要一些定制。目前它做了我需要做的事情。当我有一点内容时，它会将我的DIV推到浏览器的整个高度。

但是当我有更多内容时，内容会继续，但DIV不会扩展。

如何自定义以下脚本，以便检测到如果内容足够，则无需调整高度？

<script>
//Initial load of page
$(document).ready(sizeContent);

//Every resize of window
$(window).resize(sizeContent);

//Dynamically assign height
function sizeContent() {
    var newHeight = $("html").height() - $("#header").height() - $("#content-header").height()- $("#footer-wrapper").height() + 6 + "px";
    $("#content").css("height", newHeight);
}
</script>

Answer 1

function sizeContent() {
    var html = $("html").height(),
        content = $("#content").height(),
        header = $("#header").height(),
        contentHeader = $("#content-header").height(),
        footerWrapper = $("#footer-wrapper").height(),
        availableSpace = html - header - contentHeader - footerWrapper;

    if (content < availableSpace) {
        $("#content").css("height", availableSpace + 6 + "px");
    }
}

Javascript / jQuery - 检测浏览器高度 - 简单修复？

1 个答案: