如何制作与内容 div 高度相同的侧边栏？答案

【问题标题】：How to make sidebar with same height as the content div?如何制作与内容 div 高度相同的侧边栏？
【发布时间】：2015-12-18 01:11:45
【问题描述】：

代码如下：

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

【问题讨论】：

我不确定你是否想要它作为纯 CSS 但我为你制作了一个带有 jQuery 的版本：jsfiddle.net/yJbUW/1
不错的解决方案@andershagbard，但也可以用 CSS 解决。检查我的答案。
看到这个答案stackoverflow.com/a/20167829/1741542

标签： css height

【解决方案1】：

您可以通过将#container 显示为表格并将#content 和#sidebar 显示为表格单元格来做到这一点：

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

检查您的updated Fiddle。

【讨论】：

【解决方案2】：

你也可以试试下面的代码

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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

<p style="clear:both;"></p>

【讨论】：