javascript - 全高div到屏幕尺寸-JQuery

我创建了一个页面，在其中计算页眉和页脚的高度以及窗口的高度，然后将剩余的高度应用于内容区域，以便内容区域覆盖并填充它。

它没有按预期工作，我在通常不应该在该页面上滚动的页面，只有当正文的内容超过剩余空间时才应出现滚动页面。

这是JSfiddle

function contentHeight() {
            var winH = $(window).height(),
                headerHei = $("header").height(),
                footerHei = $("footer").height(),
                contentHei = winH - headerHei - footerHei;
            $(".content-wrapper").css("min-height", contentHei);
}

        $(document).ready(function () {
            contentHeight();
        });
        $(window).resize(function () {
            contentHeight();
        });

*, ::after, ::before {
	box-sizing: border-box
}
header{float:left; width:100%; padding;10px 0; background:#ececec;}
.content-wrapper{float:left; width:100%; padding:20px; background:#cdcdcd;}
footer{float:left; width:100%; padding:15px 0;  background:#333333;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header><p>This is heading</p><p>This is sub-heading</p></header>
    <div class="content-wrapper">
    <p>
    this is content area
    </p>
    <p>
    this is content area
    </p>
    </div>
    <footer><p>This is footer</p></footer>

 编辑：chrome的屏幕截图

最佳答案

出现此问题的原因是您已使用.height()来测量元素的高度，但是它们具有顶部和底部填充，并且.height()不考虑填充。您应该尝试.outerHeight()。试试这个代码。

function contentHeight() {
  var winH = $(window).outerHeight(),
    headerHei = $("header").outerHeight(),
    footerHei = $("footer").outerHeight(),
    contentHei = winH - headerHei - footerHei;
  $(".content-wrapper").css("min-height", contentHei);
}

$(document).ready(function() {
  contentHeight();
});
$(window).resize(function() {
  contentHeight();
});

您还可以在此处考虑.height和.outerHeight的参考。
https://www.texelate.co.uk/blog/jquery-whats-the-difference-between-height-innerheight-and-outerheight

关于javascript - 全高div到屏幕尺寸-JQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50238659/