你如何覆盖两个 div 并使它们具有相同的高度？答案

【问题标题】：How do you overlay two divs and make them the same height?你如何覆盖两个 div 并使它们具有相同的高度？
【发布时间】：2011-06-19 12:10:40
【问题描述】：

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

【问题讨论】：

具体是什么问题？问如何复制 twitter 布局有点抽象。使用 Firebug 或 Chrome 的检查来检查它们的结构——我相信你会找到 z-index 和/或 position 属性。
是的，有点像 twitter 主页以及侧边栏适合内容 div 下方的方式。感谢萤火虫的建议，我会尝试的。

标签： css html twitter transparency sidebar

【解决方案1】：

一种将其存档的技术称为人造列。看看...http://www.alistapart.com/articles/fauxcolumns/

否则你可以使用 min-height/max-height

【讨论】：

@Julian 感谢萤火虫的建议，我很久以前就安装了它，但从未使用过！很有帮助！！

【解决方案2】：

创建始终与内容区域高度相同的侧边栏的最常用方法本质上是创建“假”或人造侧边栏。这是一个例子：

<div id="wrapper">

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

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

</div>

您的样式表看起来像这样：

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

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

图像 faux_sidebar.jpg 将与侧边栏的宽度相同（对于某些填充可能会更宽一些）。这个想法是#wrapper的背景是一个图像，它是侧边栏的背景。然后侧边栏会像往常一样浮动在内容旁边，并且因为#wrapper 将扩展以容纳其两个子项中较高的一个，所以侧边栏将始终与内容的高度相同。

【讨论】：

【解决方案3】：

我更喜欢这个：

HTML：

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

CSS：

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

【讨论】：