Question

我正在尝试创建一个类似于twitter的内容div，旁边有一个侧边栏似乎被覆盖。我怎样才能用css实现这个目标？

Answer 1

将此归档的一种技术称为人造柱。看看...... http://www.alistapart.com/articles/fauxcolumns/

也许你可以使用min-height / max-height

Answer 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将扩展以适应其两个孩子的较高者，侧边栏将始终与内容的高度相同。

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

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

3 个答案: