Do a DIV to keep the rest of the page upright?

Question

I have a Google Maps application that takes up most of the page. However, I need to reserve the topmost strip of space for the menu bar. How to make a map div automatically fill its vertical space? height: 100% does not work because the top bar then pushes the map to the bottom of the page.

 +--------------------------------+ | top bar (n units tall) | |================================| | ^ | | | | | div | | (100%-n units tall) | | | | | v | +--------------------------------+ 

Answer 1

You can use absolute positioning.

HTML

 <div id="content"> <div id="header"> Header </div> This is where the content starts. </div> 

CSS

 BODY { margin: 0; padding: 0; } #content { border: 3px solid #971111; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #DDD; padding-top: 85px; } #header { border: 2px solid #279895; background-color: #FFF; height: 75px; position: absolute; top: 0; left: 0; right: 0; } 

By positioning #content absolutely and specifying the properties of the top, right, bottom and left, you get a div that occupies the entire viewport.

Then you set padding-top to #content as> = height #header .

Finally, put #header inside #content and set it absolutely (specifying top, left, right and height).

I'm not sure how convenient this is for the browser. Check out this article at List Apart for more info.

Answer 2

The way to do this, apparently, is to use JavaScript to control the onload and onresize events and programmatically change the fill size of the div as follows:

Using jQuery:

 function resize() { $("#bottom").height($(document).height() - $('#top').height()); } 

Using regular JavaScript:

 function resize() { document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px"; } 

Edit: and then bind them to the window object.

Answer 3

Another solution not specified is using CSS3, not javascript. Now there is a calc () function that can be used to execute the same function:

HTML

 <div id="content"> <div id="header"> Header </div> <div id="bottom"> Bottom </div> </div> 

CSS3

 #content { height: 300px; border-style: solid; border-color: blue; box-sizing: border-box; } #header { background-color: red; height: 30px; } #bottom { height: calc(100% - 30px); background-color: green; } 

Here is jsfiddle

You can also learn the box-sizing: border-box style for inner divs, as this can get rid of fill problems and borders tearing out beyond the parent divs.

Answer 4

If you calculate the page position of a div element , you can do without knowing the title element:

 function resize() { var el = $("#bottom"); el.height($(document).height() - el.offset().top); } 

Answer 5

I recommend you try jquery-layout . In the link you will see a bunch of demos and examples.

I don’t know if you are familiar with the concepts of JQuery or any other Javascript framework like Prototype.js or Mootools , but this is a vital idea: use one of them. They hide most browser-related software from the programmer, and they have many useful extensions for UI, DOM manipulation, etc.

Answer 6

umm, you need to add html, body { height: 100%; } html, body { height: 100%; } , after that, the relative element, with min-height: 100%

After that for IE6

 <!--[if lt IE 7]> <style media="screen" type="text/css"> MyAutoheightElement { height: 100%; } </style> <![endif]--> 

This will give your site a height of 100% in each browser.

Give it a try! Hope this helps :)

Answer 7

 var sizeFooter = function(){ $(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height()) } $(window).resize(sizeFooter);