0

我知道有人问过这个问题，哦，我不知道，一百万次？然而，我无法弄清楚这一点。所以我要添加我的代码并在这个古老的问题上寻求一些帮助。

我只有两列（div's）。而且我有一个背景div，我想匹配较长两列的长度。

我试图模仿的完美示例是 Twitter 主页。主要的两列后面有半透明的白色背景，并带有一些填充。

这是我的代码：

<div id = "wrap">
     <div id="content">
          <div id="column1"></div>
          <div id="column2"></div>
     <div>
</div>

我的 CSS：

html, body {
    height: 100%;
}

/*  This goes 100% width of screen */
#wrap {
    background: #fff;   
}

/* This is column that I want to extend all the way down ! */

#content {
    padding: 0 10px;
    background: #bbb;
    width: 820px;
    min-width: 820px;
    min-height: 100%;
    height: 100%;
    margin: 0 auto;
}

#column1 {
    padding: 10px;
    border: 1px solid #bbb;
    background: #fff;
    width: 550px;
    margin: 80px 25px 75px 0;
    float: left;
    min-width: 150px;
}

#column2 {
    padding: 5px;
    border: 1px solid #bbb;
    background: #fff;
    width: 205px;
    float: left;
    min-width: 200px;
    margin: 100px 0 25px;
}

基本上，会发生什么，内容似乎有 0 height。

如何将背景容器扩展到哪一列最长的总高度？

4

1 回答 1

1

应用于float:left;内容类

content {
  padding: 0 10px;
  background: #bbb;
  width: 820px;
  min-width: 820px;
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  float: left;
}

示例 jsFiddle

于 2013-08-04T22:23:30.887 回答