Question

代码如下：

（CSS）

#container {
    border:1px dashed #000;
    overflow:hidden;
}
#content, #sidebar {
    float:left;
    width:50%;
}
#content {
    background:yellow;
}

#sidebar {
    background:grey;
}

#sidebar {
    height:100%;
}

（HTML）

<div id="container">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
    </div>
    <div id="sidebar">
        <p>Few words</p>
    </div>
</div>

我希望看到#sidebar div具有相同的高度，就像#content div一样，是否可能没有绝对位置？在线版：http://jsfiddle.net/yJbUW/

Answer 1

您可以通过将#container显示为表格并将#content和#sidebar显示为表格单元格来执行此操作：

#container {
    border:1px dashed #000;
    display: table;
    width: 100%;
}
#content, #sidebar {
    display: table-cell;
    width:50%;
}

检查updated Fiddle。

Answer 2

可以解决 #content, #sidebar { display: table-cell; width:50%; }

Answer 3

您也可以尝试以下代码

CSS到这里

#container {
    border:1px dashed #000;
    overflow:hidden;
}
#content, #sidebar {
    float:left;
    width:50%;
}
#content {
    background:yellow;
}

#sidebar {
    background:grey;
}


#Container
{
    height: auto;
    width: auto;
}

并按如下方式更新HTML，

<div id="Container">
    <span id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
    </span>

    <span id="sidebar">
        <p>Few words</p>
    </span>
 </div>

Answer 4

.table {
    display:table;
}
.row {
    display:table-row;
}
.one {
    width:200px;
    border:1px solid #333;
    display:table-cell
}

<div class="table">
    <div class="row">
        <div class="one">gfhgfhgfhgf</div>
        <div class="one">gfhgfhgfhgf</div>
    </div>
</div>

Answer 5

在容器关闭Div之前使用此代码，对我有用！

{{1}}

如何使侧边栏与内容div具有相同的高度？

5 个答案: