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必须居中于body中，但我无法使用绝对定位实现。

- austinbv

---

我仍然对为什么需要“真正”的全高度感到好奇和困惑。如果它看起来一样，唯一的区别只能在代码中查看...那么有什么麻烦呢？当然，真正的全高度是灵活的...但你从未给出理由，所以...？ - Joonas

一个列包含了一个信息的div和一个canvas，当canvas变大或缩小时，div也需要相应地调整大小。我不知道为什么需要-1，只是因为我没有给出解释，事实上，没有给出解释不应该影响回答问题的必要性。相反，我问了这个问题，因为我知道所有这些愚蠢的背景图像的快捷方式，在这种情况下，这不是我想要的，因此我没有使用它。 - austinbv

嗯...我不能对此发表任何评论，因为我没有给你的问题打负分.. 我只是想知道为什么真正的满高度是必要的。说实话，我还有点不理解为什么..我的意思是，如果它看起来像是完整高度并且背景可以伸展.. 那就不应该有任何问题了。我认为这里应该至少有几个好答案。当然，我也从自己的回答中说起.. :) - Joonas

人们想要解释的原因是因为解释决定了如何回答问题。真正的答案是 - 你想要的无法实现，只有绕过方法（接受的答案是其中之一，伪列是另一个）。使用的方法取决于你想要什么？动态高度？动态宽度？等等。 - chris

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，并将其简化到基本的程度，同时着色以使其明显可行。

- tw16

Answer 2

编辑：仅使用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

这就是它的工作原理。

外部容器的背景将被内部容器的背景覆盖 - 我们通过说右: 50%来将其向左偏移50％ - 因此，相对于外部容器而言，宽度相等但左移50％的内部容器将覆盖外部容器的左半部分。

这些列都是用于内容的。由于它们位于内部容器中，内部容器又位于外部容器中 - 扩展任一列都会将两个容器一起向下推，因此无论哪一列的内容更长，它们始终看起来大小相等。

目前的代码需要进行调整以适应您的外观需求（填充，边距等）。调整right / leftColumn的宽度以适应总体尺寸（但两者必须合计<100％以适合并排）。调整内部容器的“right”属性以将其左右移动，从而有效地更改列的大小。

我从此处抽象了这个概念，虽然我很难理解，但其中有更多关于如何设置宽度/左侧位置以考虑填充/边距等的正式描述。

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

- chris

---

不行，我需要这两列实际上都是页面高度，而不仅仅是表面上这样显示。 - austinbv

你能详细阐述一下你的原始帖子，解释为什么-这个解决方案解决了所提出的问题。具体地说，除了外观列之外，您想要实现什么样的目标，伪造设计无法实现？ - chris

问题是如何获得两列等高。而不是如何让两列看起来相等。您的解决方案只是在较长的列边缘放置了一个虚假的列分隔符，使其看起来像第二列也到底部了。如果它们具有不同的背景，这种方法将行不通。 - austinbv

背景由背景图像确定 - 左半部分和右半部分可以根据需要使用不同的图案/颜色；因此，如果每列只需要相同高度的背景颜色/图像，则此解决方案有效。如果您需要，比如说，右列有一堆空白空间，然后是页脚，那么这种方法就行不通了。这就是我所指的。我认为还有另一种方法...将更新响应。 - chris

Answer 3

假设您的页面中有许多其他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的任何值。

- Tepken Vannkorn

---

我尝试将页面上每个父元素的高度设置为auto / 100％，但都没有起作用。 - austinbv

我认为你不应该关心高度。当数据被插入时，它们将自动设置。 - Tepken Vannkorn

虽然这很有帮助，但高度对于设计来说是至关重要的。 - austinbv

Answer 4

将class="col"添加到每一列的html中

#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 */
}

- Kelly Apollo

---

我尝试设置整个类别的!important标签以确保安全，但没有任何结果。 - austinbv

抱歉，我误解了您的情况。如果您只想要这样的演示布局，请按照@george所说，采用“Faux”列。如果您希望较短的列元素被拉伸到包装器的高度，请考虑使用js解决方案。 - Kelly Apollo

Answer 5

您可以在 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;
}

- Xavier

---

之前尝试在底部添加clear，但没有成功。现在又尝试使用br标签，仍然没有结果。 - austinbv

Answer 6

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

像这样的东西非常常用。您不需要真正使列高度充满，只需将所有列包装到外部元素中即可保持背景。

编辑：幻象就是你想让它看起来像什么http://jsfiddle.net/Xtw84/2/

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

- Joonas

---

我需要两列都是全高。http://jsfiddle.net/austinbv/enpxH/ 显示它们都不是。很抱歉，这样行不通。 - austinbv

@austinbv 你需要开始像一个魔术师一样思考。请查看我的更新答案。 - Joonas