分享程序员开发的那些事...
更新时间：2022-12-21 22:11:38
魔法在 box-sizing： border-box; 。为了与Firefox，chrome< 10和safari< 5.1的兼容性，添加-webkit和-moz-前缀。 IE支持8.0版本。
The magic is in box-sizing:border-box;. For compatibility with Firefox, chrome<10, and safari<5.1, add the -webkit- and -moz- prefixes. IE supports it as of 8.0.
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>very structured layout</title>
<style type='text/css'>
* {margin:0; padding:0;}
body {background:#fff; position:absolute; width:100%; height:100%;}
#main {background:#888; height:100%; padding:60px 0 40px; box-sizing:border-box;}
#head {background:#f8f; position:absolute; width:100%; height:60px;}
#left {background:#ff8; float:left; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:40px;}
</style>
</head>
<body>
<div id='head'>header: width = 100%, height = 40px</div>
<div id='main'>
<div id='left'>left: width = 250px, height = 100%</div>
<div id='right'>right: width = 100% - 250px, height = 100%</div>
</div>
<div id='foot'>foot: width = 100%, height = 60px</div>
</body>
</html>
编辑：安德烈的解决方案让我意识到我可以实现更大的兼容性，我搞砸了一下，替代解决方案，我认为也更直观。它在IE7中不工作，但它在IE8中工作。
edit: after Andres' solution made me realize I could achieve greater compatibility, I messed around a bit and came up with an alternate solution, which I think is more intuitive as well. It doesn't work in IE7, but it does work in IE8.
页面与上面相同，唯一的变化是CSS被替换this：
The page is the same as the above, with the only change being that the CSS is replaced with this:
* {margin:0; padding:0;}
body {background:#fff;}
#main {background:#888; position:absolute; top:40px; bottom:60px; width:100%;}
#head {background:#f8f; position:absolute; width:100%; height:40px;}
#left {background:#ff8; position:absolute; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; margin-left:250px; height:100%; overflow:scroll;}
#foot {background:#f88; position:absolute; bottom:0; width:100%; height:60px;}
请注意，对于这两个版本， #head 和 #foot 需要有溢出属性而不是可见关闭页面。
Note that, for both versions, #head and #foot need to have an overflow property other than visible if their content would otherwise extend off the page.