html - CSS float 和高度问题

Question

我正在尝试创建一个两栏网页。两列都有动态高度，但我希望它们都能扩展 100% 的页面。

我的意思是如果你有一个页面

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

如您在两列上方所见，我希望扩展页面的整个高度。

现在我有

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
</div>

#col1 {float: left;}
#col2 {float: right;}

问题是无论我尝试什么，唯一能让列增加高度的方法是使用静态数字

#col2 {
  float: right;}
  height: 100px;
}

这不起作用，因为内容是动态的。

我已经尝试更改 float 并在各处放置清除，但无论我做什么，我的页面最终看起来像这样

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             +----------+
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

第二列比第一列短。

如何使用两个并排的列来扩展页面的高度？

编辑

我已经尝试了所有的建议，但没有结果。我想补充一点。如果有更好的方法在没有花车的情况下做到这一点，我也愿意。例如相对位置。唯一的问题是主 div 必须位于 body 的中心，我似乎无法使用绝对值。

Answer 1

我有一个解决方案给你。现场示例:http://jsfiddle.net/Qbdab/

HTML:

<div id="header">
</div>
<div class="colmask doublepage">
    <div class="colleft">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>
<div id="footer">
</div>

CSS:

#header {
    background: lightgreen;
    clear:both;
    float:left;
    width:100%;
}
.colmask {
    clear:both;
    float:left;
    width:100%;            
    overflow:hidden;
}
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,.col2{
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}

.doublepage {
    background: lightblue;   /* right column background colour */
}
.doublepage .colleft {
    right:50%; /* right column width */
    background: salmon; /* left column background colour */
}
.doublepage .col1 {
    width:46%; /* left column content width (column width minus left and right padding) */
    left:52%; /* right column width plus left column left padding */
}
.doublepage .col2 {
    width:46%; /* right column content width (column width minus left and right padding) */
    left:56%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
#footer {
    background: pink;
    clear:both;
    float:left;
    width:100%;
}

我用了这个http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm并将其精简到最基本的状态，同时还对其进行着色以使其明显有效。