Question

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

我只有两列（div）。我有一个背景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。

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

Answer 1

将float:left;应用于内容类

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

Example jsFiddle

背景容器匹配内部分裂的高度

1 个答案: