我有一个三列、固定的页眉/页脚和三列内容布局，当中间 DIV 溢出时，左右 DIV 不会拉伸到 100% 高度。
有什么建议吗？另外，您如何看待布局 CSS 以及它的跨浏览器兼容性和整体 CSS 使用情况？
干杯，大卫
jsFiddle：http: //jsfiddle.net/VsTYJ/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Page</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
height: 100%;
}
#container-main
{
background: #888888;
margin: 0;
padding: 0;
font: 1.5em "Trebuchet MS", Helvetica, sans-serif;
height: 100%;
min-height: 100%;
min-width: 768px;
}
#container-left, #container-middle, #container-right
{
float: left;
margin: 0;
padding: 0;
min-height: 100%;
}
#container-left
{
background: #777777;
width: 25%;
}
#container-middle
{
background: #999999;
width: 60%;
}
#container-right
{
background: #777777;
width: 15%;
}
#container-header
{
background: #eee;
border: 0px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
padding: 0;
}
#header-left, #header-middle, #header-right
{
text-align: center;
line-height: 60px;
margin: 0;
padding: 0;
float: left;
}
#header-left
{
background: #999999;
width: 25%;
}
#header-middle
{
background: #888888;
width: 60%;
}
#header-right
{
background: #999999;
width: 15%;
}
#container-content
{
margin: 0;
overflow: auto;
padding: 50px 0 50px 0;
width: 100%;
}
#content
{
}
#container-footer
{
background:#eee;
border: 0px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer-left, #footer-middle, #footer-right
{
text-align: center;
line-height: 60px;
margin: 0;
float: left;
}
#footer-left
{
background: #999999;
width: 25%;
}
#footer-middle
{
background: #888888;
width: 60%;
}
#footer-right
{
background: #999999;
width: 15%;
}
</style>
</head>
<body>
<div id="container-main">
<div id="container-left">
Content 1
</div>
<div id="container-middle">
<div id="container-header">
<div id="header-left">
Header Left
</div>
<div id="header-middle">
Header Middle
</div>
<div id="header-right">
Header Right
</div>
</div>
<div id="container-content">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="container-footer">
<div id="footer-left">
Footer Left
</div>
<div id="footer-middle">
Footer Middle
</div>
<div id="footer-right">
Footer Right
</div>
</div>
</div>
<div id="container-right">
Content 3
</div>
</div>
</body>
</html>