全高div到屏幕尺寸-JQuery

Question

I have created a page where I am calculating the height of header and footer height and window height, and applying the remaining height to content area so the content area covers the and fill it.

It's not working as expected, I am getting scroll on the page which usually shouldn't be, scroll should appear only when the content of the body is more than to the remaining space.

Here is the 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> 

EDIT: Screenshot of chrome

Answer 1

The reason for your issue is you have used .height() to measure height of the element, but they have top and bottom padding and .height() don't consider padding. You should try .outerHeight() . Try this code.

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

You can also consider the reference for .height and .outerHeight here. https://www.texelate.co.uk/blog/jquery-whats-the-difference-between-height-innerheight-and-outerheight

Answer 2

probably a simple:

body{
  margin:0;
}

could fix everything.

OR

Well, as it seems to be not calculating very well, you can try to 'bypass' this problem getting the paddings (that seems to be the problem over here).

Then you can set the content height beign:
total height - (footer + header + paddings)

My code below do this, see if this helps you. (open snippet in full page size)

 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

The problem with it is that neither header nor footer has height.

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

Already tested in the provided fiddler. It worked

Edit:Forgot to mention that I did not used Jquery, I do not know if it is necessary for you to use it.