得到左列拉伸一直向下 [英] get left column to stretch all the way down
问题描述
现在我已经打了三天了。我已经阅读了关于3col拉伸的文章，并设置清晰和使用位置绝对和相对（许多矛盾）
I've been banging my head off this for nearly 3days now. I've read loads of articles about 3col stretch, and seting clear and using position absolute and relative (many contradictory)
我想，我想，一个非常简单的出来。我想在左边的导航div。左边有两个div，一个是footer。如果我使用表，它将是这样：
I want, what I consider, a very simple lay out. I want a navigation div on the left. Two divs on the left and a footer. If i was using tables it would be something like this:
<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工作，但不是在歌剧或firefox。
However I can't get the left div to stretch all the way down. Below is the closest I've come to a solution. Which actually seems to work in ie7 but not in opera or firefox.
我相信这是由float不扩展父div的长度，所以左div
I believe this is caused by the float not expanding the length of the parent div, so the left div thinks it's parent is smaller than it is.
任何帮助将是巨大的。
<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。
I took the freedom of cleaning it up a bit. I also put your footer div outside of your main div.
在此布局中，主div的内容决定了高度。我给所有的内容左边距20％和绝对定位左边div在这个边距。由于主div也是左div的父级，将左div的高度设置为100％使得它伸展到主div的高度（在其位置具有内容的高度）。
In this layout the content of the main div determines the height. I gave all the content a left margin of 20% and absolute positioned the left div over this margin. Since the main div is also the parent of the left div, setting the height of the left div to 100% makes it stretch to the height of the main div (Which in its place had the height of the content).
另一个（稍清洁）选项可以设置 bottom：0px c> height：100％。它会将底部对齐到容器底部（主div），但我认为在ie6中不起作用。
Another (somewhat cleaner) option would be to set the bottom: 0px in stead of the height: 100% on the left div. It would align the bottom to the bottom of the container (main div) but I think that doesn't work in 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;
}
PS：我希望这些< / br> ; 标签仅用于测试，因为它们看起来真的很丑陋。 CSS被发明以从html中消除这些表现标签。
PS: I hope these </br> tags are only used for testing because they look real ugly. CSS was invented to eliminate these kind of presentational tags out of html.
这篇关于得到左列拉伸一直向下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
