Css 如何重叠两个div并使其具有相同的高度？

我正在尝试制作一个类似于twitter的内容div，它旁边有一个似乎被覆盖的边栏。如何使用css实现这一点？

一种归档技术称为“人造列”。看看

---

否则，您可以使用“最小高度/最大高度”

创建与内容区域高度始终相同的侧栏的最常用方法实际上是创建“假”或假侧栏。下面是一个例子：

<div id="wrapper">

     <div id="content">
          <p>My Content</p>
     </div>

     <div id="sidebar">
          <p>Sidebar</p>
     </div>

</div>

图像faux_sidebar.jpg与侧边栏的宽度相同（对于某些填充，可能会宽一点）。其思想是#wrapper的背景是一个图像，它是侧边栏的背景。然后，边栏会像普通一样浮动在内容旁边，因为“包装器”会扩展以容纳两个子项中较高的一个，所以边栏的高度将始终与内容相同。

我更喜欢这样：

HTML:

---

具体问题是什么？询问如何复制twitter布局有点抽象；使用Firebug或Chrome的inspect检查它们的结构——我相信你会找到

z-index

和/或

position

属性。是的，有点像twitters主页和侧边栏放在content div下面的方式。感谢Firebug的建议，我会试试看。@Julian感谢Firebug的建议，我很早以前就安装了，但从未使用过！这很有帮助！！

#wrapper {
     background: url(faux_sidebar.jpg) top right repeat-y;
}

#sidebar {
     float:right;
     width:200px;
}

<div class="surround">
    <div class="main">
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
    </div>
    <div class="side">
        /* allways the same height like main */
    </div>
</div>

.surround
{
    display: table;
    width:900px;
    min-height:200px;
}

.main{
    display:table-cell;
    width:600px;
    min-height:200px;
    background-color:blue;
}
.side{
    display:table-cell;
    width:300px;
    min-height:200px;
    background-color:red;
}