使浏览器自动固定布局的最佳方法

Question

For example,I want to make a layout like this:

The 'header' can have a fixed height(for example:200px)

The 'menu' div in the left can have a fix width (for example:300px).

Now,I want the main div in the right can take all the width and height of the rest space.

Also,if user resize the browser,the size of the main div should resized accordingly,in a word,I do not want the scroll bar show in anytime.

Using javascript is the common manner,but it may difficult.

For example,use this(pseudo code):

window.onresize=function(){
 main.style.width=document.clientWidth-left.style.width;
}

But how about the border of the elemnt?

main.style.width=document.clientWidth-left.style.width-left.style.borderLeftWidth-left.style.borderRightWidth-......;

But in different browser,the 'element.style.width' may contain or not contain the width of the browser.

So I wonder if there is any idea I can avoid to use the js caculate?

Answer 1

Use CSS and take a look at columns with equal height . If you want to never have scrolls on browser resize, then I recommend using absolute positioning . But that's not native to web-development and design.

Answer 2

This use CSS is very easy.

HTML:

<div class="header">header</div>
<div class="content">
    <div class="menu">menu</div>
    <div class="main">main</div>
</div>
<div class="footer">footer</div>

CSS:

.header {
  height: 200px;
}
.content {
   overflow: hidden;
 }
.menu {
  float: left;
  width: 300px;
}
.main {
  overflow: hidden;
  *zoom: 1; /* IE6/7 */
  padding-bottom: 99999px;
  margin-bottom: -99999px;
}

Answer 3

This is my best shot:

http://jsfiddle.net/t4TV2/