CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

full height div to screen size - JQuery

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

Upvotes: 1

Views: 2115

Answers (3)

Calvin Nunes
Calvin Nunes

Reputation: 6501

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>

Upvotes: 1

fared
fared

Reputation: 170

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.

Upvotes: 0

Aryan Twanju
Aryan Twanju

Reputation: 2516

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

Upvotes: 1

Related Questions