Html 在CSS中使两个div的高度与同一父级相等

我正在尝试从两个div#innerwrapper.sidebar和#innerwrapper>.content来均衡高度，这两个div位于同一父级#innerwrapper.content的相邻位置（按float:left）

我已经通过在一个单独的文件中使用jQuery解决了这个问题，但由于这是一个CSS问题，我更喜欢使用CSS解决它。我尝试了在StackOverflow上编写的一些东西，比如使用display:inline块而不是float，或者display:inline表，但它无法解决问题

下面给出了代码笔的链接

你知道CSS的解决方案吗

HTML:

jQuery：

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

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

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

函数相等（）
{
var$col1=$（“#innerwrapper.sidebar”）；
var$col2=$（'#innerwrapper>.content'）；
如果（$col1.height（）<$col2.height（））{
$col1.height（$col2.height（））；
}
}
$（文档）.ready（函数（）{
等重（）；
});

正如Alien先生所评论的，您可以使用

表格单元格或
flex

我已经删除了所有jQuery，并将其放入
CSS
中，以便使用
display:table单元格实现这一点

CSS中的更改

#innerwrapper {
  width: 66.66%;
  margin: auto;
  display: table; /* Floats gone and added display table to parent */
}

#innerwrapper .sidebar {
  width: 15%;
  background-color: #DFE2DB;
  display: table-cell;  /* Floats gone and added display table-cell */
}

#innerwrapper > .content {
  width: 85%;
  display: table-cell;/* Floats gone and added display table-cell */
}

使用更改演示


*，
*：之后，
*：之前{
保证金：0；
填充：0；
}
html{}正文{
背景色：#191919；
}
标题{}#标题{
字体系列：衬线；
字体大小：1.1米；
保证金：自动；
宽度：66.66%；
颜色：#DFE2DB；
身高：6em；
}
#导航包装器{
背景色：#FFF056；
}
#导航包装器。菜单{
字体大小：1.1米；
字体系列：无衬线；
保证金：自动；
宽度：66.66%；
}
#纳夫利{
背景色：#E6D84D；
填充物：0.1em 0.5em；
显示：内联块；
}
#主包装{
背景色：#FFFFFF；
}
#主包装器：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
#内包装{
宽度：66.66%；
保证金：自动；
显示：表格；
}
#内包装器。侧栏{
宽度：15%；
背景色：#DFE2DB；
显示：表格单元格；
}
.侧边栏.菜单李{
显示：块；
}
#innerwrapper>.content{
宽度：85%；
显示：表格单元格；
}

某物

测试1
测试2
测试3
测试4
测试5


测试1
测试2
测试3
测试4
测试5

Phasellus quis libero eros。Maecenas位于mauris ornare，前庭无门位于amet，blandit mauris。佩朗茨克是一位伟大的人物，他是一位伟大的人物。南埃格斯塔斯乌尔纳码头，是一个不起眼的地方。莫比·非利奥在埃尼姆·拉西尼亚·廷西登。

整数quis auctor nibh，以佩伦茨克米为单位。在莫里斯河。本杜姆悬钩子，非分子orci iaculis id.本杜姆酒庄的Praesent ornare eros。阿利奎姆·埃拉特·帕特。我坐在我的同侧，在我的右边
塞德·多洛。努克·托托·多洛、塞佩尔·ac·洛博蒂斯·奎斯、奥纳·亚库利斯·莫里斯。请不要让我相信你。埃尼安·维塔·坦普斯sem。我是狮子座的独角兽，我是狮子座的独角兽。克拉斯·斯克莱里斯克，自由非特里斯蒂克·索利西图丁，大都会
lectus eleifend tellus，ac semper odio magna lacinia，前自由前庭，turpis eget，mattis blandit ipsum。无门和同侧门不在门内。不必担心，要小心，要及时。塞德库苏斯
purus ac Elite pulvinar，位于弗林尼利亚码头（fringilla quam eleifend）。非康茂德·维利特，欧盟临时雇员。帕塞勒斯·拉库斯·洛雷姆（Phasellus lacus lorem），美国大都会大学（metus ut）的康塞特图尔（Concertetur），拍卖人普雷蒂姆·杜伊（pretium dui）。前庭直径小，寿命短，颞侧软组织。前庭nec
只有奥古斯·马蒂斯·康塞特图。在hac habitasse Plateum，一句名言。如果你不相信，那你就没有时间了。梅塞纳斯·沃里帕特·康塞夸特·卢克图斯。在乌拉姆科珀·埃吉斯塔斯（ullamcorper-egestas）中，我们可以用一种简单的语言来表达，也可以用另一种语言来表达
我是多洛。双前庭整型、软背侧耳、斜方肌。在hac habitasse Plateum，一句名言。我的朋友们，我的朋友们，我的朋友们。罗恩卡斯（Quisque rhoncus）是一位前受权者，他是一位神职人员。
梅塞纳斯·阿利奎特·弗林吉亚·费吉亚特。一个封建社会没有侵权的元素，没有权利。毛里斯和梅特斯坐在他旁边。没有选择，没有权利，没有权利，没有效率。奎斯克
积累，积累，积累，积累，积累，积累，积累，积累。这是一个非常重要的问题。这是一种生活方式。给我一个暂时的尊严。
毛里斯·鲁特鲁姆（Mauris rutrum）、阿尔库·阿梅特·比本杜姆（arcu sit amet bibendum suscipit）、梅特斯·托尔托（metus tortor Underlectus）、非猫科动物阿梅特·托尔托（non Curus felis risus sit amet tortor）。你是一个智者，你是一个爱的人。在欧盟自由党的埃尼姆·布兰迪特·埃拉特·马莱苏阿达·廷西登（enim blandit erat malesuada tincidunt）中的普罗因。梅塞纳斯
拉齐尼亚·利奥·尼布（lacinia leo nibh），在艾库利斯广场（pharetra quam iaculis ac.Nunc rutrum purus massa），坐着阿梅特·鲁特姆·纳拉·朗库斯·萨吉提斯（amet rutrum nula rhoncus sagittis）。两种不同的猫科动物在一起。我坐在沙发上，坐在酒后。软背飞虱
精英奥纳雷和佩伦特斯式的居住者莫比·特里斯蒂克·塞内特斯和内特斯·马莱苏达是著名的土尔皮人。耳道前庭，非最大车辆，直径。埃涅阿斯·奎斯·普苏姆（Aenean quis ipsum），塞德·莫利斯·奎姆（sed mollis quam）。马利苏达湖雉
在lacus lacinia酒店。在enim consequat，Lel ultricies tellus laoreet的一家律师事务所工作。这是一个很好的例子。Morbi vehicula ante vel aliquet tincidunt。白兰地苏打水母。佩伦特式居住者
莫比·特里斯蒂克·塞内特斯和内特斯·马莱苏阿达是一位著名的屠夫。这是我的心愿。大鼠前庭中的血气方刚。传说
function equalColHeight()
{
    var $col1 = $('#innerwrapper .sidebar');
    var $col2 = $('#innerwrapper > .content');

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

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

#innerwrapper {
  width: 66.66%;
  margin: auto;
  display: table; /* Floats gone and added display table to parent */
}

#innerwrapper .sidebar {
  width: 15%;
  background-color: #DFE2DB;
  display: table-cell;  /* Floats gone and added display table-cell */
}

#innerwrapper > .content {
  width: 85%;
  display: table-cell;/* Floats gone and added display table-cell */
}

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

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