I want to make body have 100% of the browser height. Can I do that using CSS?
I tried setting height: 100%
, but it doesn\'t work.
I want to set
You can also use JS if needed
var winHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
var pageHeight = $('body').height();
if (pageHeight < winHeight) {
$('.main-content,').css('min-height',winHeight)
}
Try
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
About the extra space at the bottom: is your page an ASP.NET application? If so, there is probably a wrapping almost everything in your markup. Don't forget to style the form as well. Adding overflow:hidden;
to the form might remove the extra space at the bottom.
If you want to keep the margins on the body and don't want scroll bars, use the following css:
html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }
Setting body {min-height:100%}
will give you scroll bars.
See demo at http://jsbin.com/aCaDahEK/2/edit?html,output .
If you don't want the work of editing your own CSS file and define the height rules by yourself, the most typical CSS frameworks also solve this issue with the body element filling the entirety of the page, among other issues, at ease with multiple sizes of viewports.
For example, Tacit CSS framework solves this issue out of the box, where you don't need to define any CSS rules and classes and you just include the CSS file in your HTML.