CSS浮动和高度问题

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;
}

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

我尝试过更改浮动并在所有地方放置清除，但无论我做什么，我的页面最终都会看起来像这样

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

第二列比第一列短。

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

编辑

我已经放弃并尝试了所有建议，但没有结果。我想补充一点。如果有更好的方法可以在没有浮动的情况下做到这一点，我也愿意。比如相对位置。唯一的问题是主 div 必须集中在我似乎无法使用绝对值的主体中。

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 并将其精简到基本款，同时还对其进行了着色以使其明显有效。

Answer 2

假设你的页面中有更多的 div 标签。例如，

HTML:
<div id="wrapper">
  <div id="header">
     <!-- some code here -->
  </div><!-- end of header -->
  <div id="body">
     <div id="left">
        <!-- some code here -->
     </div>
     <div id="right">
        <!-- some code here -->
     </div>
     <div style="clear:both"></div>
  </div><!-- end of body -->
  <div id="footer">
     <!-- some code here -->
  </div>
</div><!-- end of wrapper -->

CSS:
#wrapper{
  background:#eee;
  width:970px;
  margin:0px auto;
}
#wrapper #body{
  height:auto;
}
#wrapper #body #left{
  widht:70%;
  float:left;
  border:1px solid black;
}
#wrapper #body #right{
  width:auto;
  float:right;
  border:1px solid black;
}

嵌套 div 会导致您从其父 div 继承任何值。

Answer 3

html:每列添加 class="col"

#col1 {
    background:lightyellow;
    float:left;
}
#col2 {
    background:lightred;
    float:right;
}
.col {
    width:300px;
    min-height:300px;    /* viewport fillsize height */
    height:100%;    /* autofill wrapper height, intend to stetch the shorter shrinked floated bloock */
}

Answer 4

您可以在您的 div 之后添加以下代码，以确保它们都清晰；

<br clear="all" />

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
  <br clear="all" />
</div>

如果你想使用 css 类来清除你可以这样做；

<br class="clear" />

br.clear {
     clear:both;
     height:0px;
     width:0px;
     margin:0;
     padding:0;
}

Answer 5

您可以尝试这样做：http://jsfiddle.net/Xtw84/1/（请注意，这是作为另一个问题的示例完成的，因此它与您的结构不完全一样，但我相信您可以弄清楚其余部分。）

这样的东西非常常用。您并没有真正使列全高，而只是通过将所有列包装到包含背景的外部元素中来创造它的错觉。

编辑：幻觉就是你让它成为的样子http://jsfiddle.net/Xtw84/2/

我什么也没做，只是将图像更改为具有这种划分样式的图像。

Answer 6

编辑：仅使用 CSS，没有办法自动调整内容容器的大小 - 它会根据其内容扩展高度 - 除非您绝对定位您的元素（这是您不想要的）。有一个 CSS 解决方法，涉及使用容器作为背景，并为内容清除列：

body {
    margin:0;
    padding:0;
    border:0;
 }

.outerContainer {
    position:relative; 
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
    backround-color: RIGHT COLUMN COLOR;}

.innerContainer {
    position:relative;
    float:left;
    width:100%;
    right:50%; /* Offsets this by 50% - see explanation */
    background-color: LEFT COLUMN COLOR;}

.leftColumn {
    float:left;
    position:relative;
    left:50%;
    width:50%;
}

.rightColumn {
    float:left;
    position:relative;
    left:50%;
    width:50%;
 }

HTML 将被结构化：

div class="outerContainer"
    div class="innerContainer"
       div class="leftColumn"  /div
       div class="rightColumn" /div
    /div
/div

这是它的工作原理。

OuterContainer 的背景将被 innerContainers 背景覆盖 - 我们向左偏移 50%（通过说 right:50%） - 因此，与 outerContainer 宽度相等但向左移动 50% 的 innerContainer 将覆盖左半边外容器。

列用于内容。由于它们位于内部容器内部，而内部容器位于外部容器内部 - 延伸任一列都会将两个容器向下推，因此哪一列的内容更长并不重要 - 它们的大小总是相同的。

按原样，代码需要调整以适应您的外观需求（填充、边距等）。调整整体大小的右/左列宽度（但两者的总和必须小于 100% 才能并排放置）。调整 innerContainers 'right' 属性以左右移动，有效地改变列的大小。

我从 here 中提取了这个，这对我来说很难理解，但对如何设置宽度/左侧定位以考虑填充/边距等有更正式的描述。

另一个（更简单）的解决方案是使用Faux Columns