Make DIV fill remainder of page vertically?

Try the following HTML code: div id="content"> Header This is where the content starts. = the height of #header Finally, place #header inside #content and position it absolutely (specifying top, left, right, and the height) I'm not sure how browser friendly this is Check out this article at A List Apart for more information.

Try the following HTML code: Header This is where the content starts. With the following CSS code: 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 top, right, bottom, and left properties, you get a div taking up the entire viewport. Then you give #content top padding >= the height of #header.

Finally, place #header inside #content and position it absolutely (specifying top, left, right, and the height). I'm not sure how browser friendly this is. Check out this article at A List Apart for more information.

Interesting, I didn't know about this trick. You should mention, though, that it doesn't work in IE6. – musicfreak May 26 '10 at 21:56 1 I did.In bold.

Read the article I cited - it explains a workaround for IE6 =) – Bryan Downing May 26 '10 at 22:22.

The way to do it, apparently, is to use JavaScript to monitor the onload and onresize events and programmatically resize the filling div like so: Using jQuery: function resize() { $("#bottom"). Height($(document).height() - $('#top').height()); } Using plain JavaScript: function resize() { document. GetElementById("bottom").style.

Height = (document.body. ClientHeight - headerHeight) + "px"; } Edit: and then bind these to the window object.

Resize doesn't work: stackoverflow. Com/questions/229010/… – Ray L. Aug 8 at 18:37 @Ray L.

: Resize works for the window object. – erjiang Aug 14 at 2:52.

I recommend you to try jquery-layout plugin. You will see a bunch of demos and examples on the link. I don't know if you are familiar with the concepts of JQuery or some other Javascript helper framework, like Prototype.

Js or Mootools but it's a vital idea to use one of them. They are hide most browser-related tricks from the programmer and they have a number of useful extension for UI, DOM manipulation, etc.

I agree! Let a jquery handle this for you. – Ray L.

Aug 4 at 3:28.

Umm, you need to add html, body { height: 100%; }, after this, a relative element, with min-height: 100% After this, for IE6 This will give your site 100% height in every browser. Try it! I hope it helps :).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.