我想出了与所有建议在那里感到沮丧之后,此布局。它的HTML5/CSS3的complient和工作在IE8 +和至少FF21 - 我还没有在其他版本和浏览器测试。但是如果你在寻找一个流畅的布局 - 这个效果很好。
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css">
* {padding:0px; margin:0px;}
html, body {width:100%; height:100%;}
#page {width:100%; height:100%;position:relative;}
#page > #header {
position:absolute;
top:0px;
left:0px;
right:0px;
height:64px;
background:#ccc;
}
#page > #body {
position:absolute;
top:64px;
left:0px;
right:0px;
bottom:64px;
}
#page > #body > #left {
position:absolute;
top:0px;
left:0px;
bottom:0px;
width:192px;
background:#bbb;
}
#page > #body > #center {
position:absolute;
top:0px;
left:192px;
right:192px;
bottom:0px;
}
#page > #body > #right {
position:absolute;
top:0px;
right:0px;
bottom:0px;
width:192px;
background:#bbb;
}
#page > #footer {
position:absolute;
bottom:0px;
right:0px;
left:0px;
height:64px;
background:#ccc;
}
</style>
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="body">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
你看过:http://www.alistapart.com/articles/holygrail/? – 2010-09-22 12:28:26
那个人使用的是不同的技术,但是我会继续冥想,看看我能否更好地理解我所指的其他圣杯 – Lorenzo 2010-09-22 12:51:27