html - 使CSS中具有相同父级的两个div的高度相等

Question

我试图平衡两个 div 的高度，#innerwrapper .sidebar 和 #innerwrapper > .content，它们彼此相邻(通过 float : left) 来自同一个父类，#innerwrapper。

我已经通过在单独的文件中使用 jQuery 解决了这个问题，但由于这是一个 CSS 问题，我更愿意使用 CSS 来解决它。我尝试了一些在 StackOverflow 上写的东西，比如使用 display: inline-block 而不是 float 或 display: inline-table，但它不会'解决问题。

Codepen 的链接如下。

你知道 CSS 中的解决方案吗？

Link to Codepen

HTML:

<div id="innerwrapper">
    <div class="sidebar">
        <div class="menu">
            <ul>
                <li>..</li>
                <li>..</li>
                <li>..</li>
                <li>..</li>
                <li>..</li>
            </ul>
        </div>
        <div class="content">
             <!-- content !-->
        </div>
    </div>
    <div class="content">
        <!-- content !-->
    </div>
</div>

CSS:

#innerwrapper {
    width: 66.66%;
    margin: auto;
}

#innerwrapper .sidebar {
    width: 15%;
    background-color: #DFE2DB;
    float: left;
}

.sidebar .menu li {
    display: block;
}

#innerwrapper > .content {
    width: 80%;
    float: left;
}

jQuery:

function equalColHeight()
{
    var $col1 = $('#innerwrapper .sidebar');
    var $col2 = $('#innerwrapper > .content');

    if ($col1.height() < $col2.height()) {
        $col1.height($col2.height());
    }
}

$(document).ready(function() {
    equalColHeight();
});

Answer 1

不需要 Javascript，你是对的，这是一个简单的 css 技巧。

将内容和导航包装到一个 div 中，您将为其指定侧边栏的颜色(在本例中为灰色)。将内容 div 设置为白色并带有 display:inline-block。

HTML

<div id="innerwrapper">
    <div class="sidebar">
    </div>
    <div class="content">
    </div>
</div>

CSS

#innerwrapper {
    width: 66.66%;
    margin: auto;
    background-color:#DFE2DB;
}

#innerwrapper .sidebar {
    width: 15%;
    background-color: #DFE2DB;
    float: left;
}

#innerwrapper > .content {
    width: 85%;
    display: inline-block;
    background: #fff;
}

Plunker Here