制作浏览器自动修复布局的最佳实践

Question

例如，我想制作一个这样的布局：

'标题'可以有一个固定的高度（例如：200px）

左侧的'menu'div可以有固定宽度（例如：300px）。

现在，我希望右边的主div可以占用剩余空间的所有宽度和高度。

此外，如果用户调整浏览器大小，主div的大小应相应调整大小，总之，我不希望滚动条随时显示。

使用javascript是常见的方式，但可能很难。

例如，使用此（伪代码）：

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

但是元素的边界怎么样？

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

但是在不同的浏览器中，'element.style.width'可能包含或不包含浏览器的宽度。

所以我想知道是否有任何想法我可以避免使用js caculate？

Answer 1

使用 CSS 并查看columns with equal height。如果您想在浏览器调整大小时永远不会有滚动，那么我建议使用绝对定位。但这不是网络开发和设计的原生。

Answer 2

这种使用CSS非常简单。

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

这是我最好的镜头：

http://jsfiddle.net/t4TV2/