我已经为此绞尽脑汁近三天了。我读过很多关于 3col 拉伸、设置清晰和使用绝对位置和相对位置的文章（很多是矛盾的）
我认为，我想要一个非常简单的布局。我想要左侧的导航 div。左侧有两个 div 和一个页脚。如果我使用表格，它会是这样的：
<table border="1">
<tr>
<td rowspan="2">
left nav.
</td>
<td>right 1</td>
</tr>
<tr>
<td>right 2</td>
</tr>
<tr>
<td colspan="2">footer</td>
</tr>
但是我无法让左侧 div 一直向下延伸。以下是我最接近的解决方案。这实际上似乎在 ie7 中有效，但在 Opera 或 Firefox 中无效。
我相信这是由于浮动没有扩展父级 div 的长度造成的，因此左侧 div 认为它的父级比实际小。
任何帮助都会很棒。
<html>
<head>
<style type="text/css">
body
{
height:100;
}
.main{
height: 100%;
margin-left: auto;
margin-right: auto;
position: absolute;
width: 100%;
}
.leftDiv
{
position: relative;
float: left;
width: 18%;
height: 100%;
background-color: aqua;
}
.topRight
{
position: relative;
float: right;
width: 80%;
background-color: green;
}
.bottomRight
{
position: relative;
float: right;
width: 80%;
background-color: red;
}
.footer
{
width: 100%;
float: right;
background: blue;
position: relative;
}
</style>
</head>
<body>
<div class="main">
<div class="leftDiv">This should Stretch all the way down the left side</div>
<div class="topRight">This should be over to the right at the top</div>
<div class="bottomRight">This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>
lotst of text here<br/> </div>
<div class="footer">footer text. This should be at the bottom of the screen under the main content.<br/></div>
</div>
</body>
</html>
我自由地清理了一下它。我还将您的页脚 div 放在主 div 之外。
在此布局中，主 div 的内容决定了高度。我给所有内容留出了 20% 的左边距，并将左侧 div 绝对定位在该边距之上。由于主 div 也是左侧 div 的父级，因此将左侧 div 的高度设置为 100% 会使其拉伸到主 div 的高度（其位置具有内容的高度）。
另一个（更干净的）选项是设置bottom: 0px而不是height: 100%在左侧 div。它将底部与容器（主 div）的底部对齐，但我认为这在 ie6 中不起作用。
.topRight, .bottomRight {
margin: 0px 0px 0px 20%;
}
.main {
height: 100%;
position: relative;
}
.leftDiv {
position: absolute;
left: 0px;
top: 0px;
width: 18%;
bottom: 0px;
background-color: aqua;
}
.topRight {
background-color: green;
}
.bottomRight {
background-color: red;
}
.footer {
background: blue;
}
http://jsfiddle.net/Z44HK/ http://jsfiddle.net/Z44HK/
PS：我希望这些</br>标签仅用于测试，因为它们看起来很丑。 CSS 的发明是为了消除 html 中的此类表示性标签。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
