Question

我现在已经差不多三十天了。我已阅读大量关于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>

Answer 1

我采取了一点清理的自由。我也把你的页脚div放在你的主div之外。

在此布局中，主div的内容决定了高度。我给所有内容留下了20％的左边距，并且绝对将左边的div放在这个边距上。由于主div也是左div的父级，因此将div的高度设置为100％会使其延伸到主div的高度（在其位置具有内容的高度）。

另一个（稍微清晰一点）选项是设置bottom: 0px而不是左边的height: 100%。它将底部与容器的底部对齐（主要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/

PS：我希望这些</br>标签仅用于测试，因为它们看起来很丑陋。发明CSS是为了消除html中的这类表现标签。

Answer 2

这是什么意思？

body
{
height:100;
}

我认为你的意思是：

html, body
{
  height: 100%;
}

浏览器无法判断100是什么。这就像买米饭。 100米多少钱？ 100粒？英镑？我不知道。记住你的单位;）

让左栏一直向下伸展

2 个答案: