2列CSS div，高度可拉伸

Question

相关（可能重复）的问题 ：

如何使用HTML / CSS实现相等高度的div？

使两个浮动CSS元素的高度相同

大家好，

我尝试了几个小时来创建可拉伸的2列div，但是没有任何运气。 这是我的html代码和下面的css代码

<div class="two_cols_container">
  <div class="two_cols">
    <div class="left-col">
      test
    </div>
    <div class="right-col">
      test
    </div>
  </div>
</div>

我的CSS代码是

.two_cols_container {
  width: 100%;
  height: 100%;
} 
.two_cols {
  position: relative;
  margin: 0 auto;
  border: 1px solid black;
  height: 100%;
  height: auto !important;
  min-height: 100%; 
}
.two_cols .left-col {
  /*position: absolute;
    left: 0;*/
  float: left;
}
.two_cols .right-col {
  /*position: absolute;
    right: 0;*/
  float: right;
}

任何想法？

Answer 1

有

1. 表格（您可能不想依靠它）
2. 伪列（最实用的方法，使用图像伪造列-参见http://www.alistapart.com/articles/fauxcolumns/ ）
3. Border Trick（有点复杂，但这仅适用于纯色）
4. 填充/边距/剪切（我不推荐使用的另一种复杂方法）

我会选择＃2。 如果您需要使这些列的背景颜色一直下降，请在这些列的容器上设置背景，并确保其垂直重复，例如，

div＃wrapper {background：url（/images/faux.gif）repeat-y; }

如果列是浮动的，请确保溢出（如隐藏）和IE的hasLayout触发器（如宽度）。

顺便说一句，因为您有浮点数，所以将overflow：hidden应用于.two_cols选择器并添加以下规则：

html，正文{高度：100％; }

Answer 2

答：可以使用float或绝对定位来创建列。 不是都。 您只需将两列都浮动到左侧，就可以了，没有绝对的定位。

B：您的大问题是，如果两个列的宽度均为100％，则它们不能彼此相邻。 当它们都占据整个宽度时，它们不可能并排坐在容纳元件中。 将宽度设置为最大50％，但是我会降低一些宽度来解决一些浏览器错误。

编辑：我同意Sneakiness，将宽度弄湿到低于50％，因为边缘和填充也必须合适。

Answer 3

我发现此方法是所有等高两列布局中最简单，最有效的方法 。 您无需伪造任何东西，它就可以正常工作。

Answer 4

如果您想使用流畅的两列布局，则需要分别为两列设置边距，以将它们都放置在页面上。

Answer 5

您可以使用div style属性创建所需的任意列，以及所需的CSS效果：

<div style=”width: 100%;”>

<div id=”left” style=”float: left;">

<--! your text here -->

</div>

<div id=”right” style=”float: right;">

<--! your text here -->

</div>

</div>

来源和示例： WordPress教程系列-有关HTML和CSS的基础知识