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

编辑：只使用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％（通过说右：50％） - 因此innerContainer，宽度等于outerContainer但向左移动50％，将覆盖左半部分outerContainer的。

列用于内容。因为它们位于位于外部容器内部的内部容器内 - 延伸任一列将向下推动BOTH容器，因此哪个列的内容更长并不重要 - 它们的大小总是相等。

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

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

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

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继承任何值。

Answer 4

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

Answer 6

你可以尝试这样做：http://jsfiddle.net/Xtw84/1/（请注意，这是作为另一个问题的一个例子来完成的，所以它不完全像你的结构，但我相信你可以把剩下的问题弄清楚。）

这样的东西是非常常用的。你没有真正使列完全高度，只是通过将所有列包装到保持背景的外部元素中来创建它的幻觉。

编辑：幻觉就是你所做的http://jsfiddle.net/Xtw84/2/

我什么都没做，只是将图像改为那些具有这种划分风格的图像。

CSS浮动和高度问题

修改

6 个答案:

编辑：幻觉就是你所做的http://jsfiddle.net/Xtw84/2/