How can I create a div which resizes with a window?

Question

I would like to create a div using css that resizes with the window.

Example:
   #container
    {
      margin: 3em;
    }
   #header {
     height: 100px;
   }
   #main {

   }
   #footer {
    height: 100px;
    bottom: 0px;
   }

   container
      header
      main
      footer

So when I resize the window, I want main to resize with the window while header and footer staty 100px;

Is there a way to do it using CSS or I will have to use Javascript?

Answer 1

Using JavaScript you can alter your divs on page load. See this article for the details:

dynamically resizing divs

Answer 2

I've done similar, but use JavaScript to do it for me as well. It's not the most elegant JS but it works. I used this when I had a div that needed to be maximum size, and it had a side bar, top and bottom bar etc. So when the browser window was resized I had to quickly adjust the container div (which was a map).

You want your markup to look like (I think you have this already):

<div id="container">
 <div id="title">Title</div>
 <div id="main"></div>
 <div id="footer></div>
</div>

Script:

var browserWidth = 0;
var browserHeight = 0;

function getSize() {
  if( typeof( window.innerWidth ) == 'number' )
  {
    //Non-IE
    isIE = false;
    browserWidth = window.innerWidth;
    browserHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

    //They're not running IE7 / FireFox2. Older browser. Find some technology
    //to destroy their computer so they're forced to upgrade.
    browserWidth = document.body.clientWidth;
    browserHeight = document.body.clientHeight;
  }
}

function updateMapSize() {
    //IE7 is 21 pixels LESS than FireFox.
    //Pretty much we want to keep the map to the maximum size alloted.
    getSize();
    //top section
    var height = browserHeight - 200;

    document.getElementById("main").style.height = height;
    document.getElementById("container").style.height = browserHeight ;
    document.getElementById("container").style.width= browserWidth ;

    setTimeout("updateMapSize()", 250);

}

Answer 3

You don't need Javascript, use CSS code as below:

#header { height: 100px; max-height:100px; }

# main { }

# footer { height: 100px; max-height:100px; bottom: 0px; }

Answer 4

   html, body, #container, #main{
     width:100%;
     height:100%;
   }

   #container
    {
     margin: 3em;
     position:relative;
    }
   #header {
     height: 100px;
     position:absolute;
     z-index:1;
   }
   #main {
     position:absolute;
     top:0;
     left:0;

   }
   #footer {
    position:absolute;
    height: 100px;
    bottom: 0px;
     z-index:1;
   }

html
  body
   container
      header
      main
      footer

The above code should give you what you are looking for a #main will cover the whole screen while your 100px tall header and footer sit over the top of it. I'm using this code on my website right now http://patrickarlt.com.

The footer and header site on top of a div that fills the whole screen. You might also want to listen to the resize event to resize items in #main as a user resizes their screen.

This isn't IE 6 safe however, but my site works in IE 7 and 8 last I checked.