Question

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

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

＆＃13;

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

＆＃13;

*, ::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;}

＆＃13;

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

＆＃13;

＆＃13; 编辑：chrome

的屏幕截图

Answer 1

您遇到问题的原因是您使用.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

Answer 2

可能很简单：

body{
  margin:0;
}

可以解决所有问题。

或

好吧，因为好像计算得不好，你可以尝试“绕过”这个问题来获取填充物（这似乎是这里的问题）。

然后你可以设置内容高度beign：
总高度 - （页脚+标题+填充）

我的代码在下面执行此操作，看看这是否对您有所帮助。（打开整页大小的片段）

function contentHeight() { var winH = $(window).outerHeight(true), headerHei = $("header").outerHeight(true), headerPad = $("header").css('padding-top').replace('px',''), footerHei = $("footer").outerHeight(true), footerPad = $("footer").css('padding-top').replace('px',''), paddings = parseInt(footerPad) + parseInt(headerPad), contentHei = winH - (headerHei + footerHei + paddings); $(".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>

Answer 3

问题在于页眉和页脚都没有高度。

CSS

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

.wrapper{
  width:100vw;
  height:100vh;
  overflow:hidden;
}

JS

function contentHeight() {
            var winH = $(window).height(),
                headerHei = $("header").height(),
                footerHei = $("footer").height(),
                contentHei = winH - (headerHei + footerHei);
            $(".content-wrapper").css("height", contentHei - 50 + 'px');
} 
$(document).ready(function () {
            contentHeight();
        });
        $(window).resize(function () {
            contentHeight();
        });

已在提供的提琴手中测试过。它工作

编辑：忘记提到我没有使用Jquery，我不知道你是否有必要使用它。

全高度div到屏幕大小 - JQuery

3 个答案: