Height Of Browser Window And Divs

May 30, 2024 Post a Comment

I am currently trying to build a website with a banner of a fixed height (100px) at the top, and I want the rest of the content to fill the rest of the page. I have it so that I ha

Solution 1:

Height is dynamic so that as you add content to your "content section", so will the size of the contianer thats holding it.

The short answer is, dont set a height for your "content section".

Solution 2:

<divstyle="height: 100px">
   Your banner
</div><div>
  Body
</div>

Solution 3:

You can just use 100% as the height of your content div - it will stretch to take up the space from your banner to the bottom of the screen.

An important part is to set the height of html and body to 100%:

HTML

<html><head><title>Foo</title></head><body><divid="banner"></div><divid="content"></div></body></html>

CSS

#banner {
    height: 100px;
    background-color: #ccc;
}

#content {
    height: 100%;
    background-color: #000;
}

body {
    height: 100%;
}

html {
    height: 100%;
}

See demo here: http://jsfiddle.net/yHFjh/

Solution 4:

Use window.innerHeight / document.documentElement.clientHeight property

<divid="banner">banner</div><divid="content">content</div><script>if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
        document.getElementById("content").style.height = document.documentElement.clientHeight - document.getElementById("banner").offsetHeight + "px";
    } else {
        document.getElementById("content").style.height = window.innerHeight - document.getElementById("banner").offsetHeight + "px";
    }
</script>

Solution 5:

Create a html and body of height 100%. Position the banner absolute. Add a content div below your banner and set it's min-height to 100%. This content will be behind the banner, but will be at least 100%. Add a div in the content with a padding-top of the height of the banner to prevent content to end up underneath the banner.

HTML:

<div id="banner"></div>
<div id="content">
    <div id="main">
        Lorem Ipsum is simply dummy text..
    </div>
</div>

CSS:

html, body { height: 100%; }
#banner { position: absolute; height: 100px; width: 100%; background: green; }
#content { min-height: 100%; background: yellow; }
#main { padding-top: 100px; }

http://fiddle.jshell.net/pY6dc/

Html5 Ready