使 CSS 中具有相同父项的两个 div 的高度相等

Question

我正在尝试平衡两个 div 的高度，#innerwrapper .sidebar 和 #innerwrapper > .content，彼此相邻（通过 float: left）来自同一父项，#innerwrapper。

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

Codepen 的 link 如下所示。

你知道 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

正如 Mr.Alien 所说，您可以使用 table-cell; 或 flex。

我已经删除了你所有的 jQuery 并放入了使用 display: table-cell; 实现此目的所需的 CSS。

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 */
}

使用更改的演示

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
}
html {} body {
  background-color: #191919;
}
header {} #title {
  font-family: serif;
  font-size: 1.1em;
  margin: auto;
  width: 66.66%;
  color: #DFE2DB;
  height: 6em;
}
#navwrapper {
  background-color: #FFF056;
}
#navwrapper .menu {
  font-size: 1.1em;
  font-family: sans-serif;
  margin: auto;
  width: 66.66%;
}
#navwrapper li {
  background-color: #E6D84D;
  padding: 0.1em 0.5em;
  display: inline-block;
}
#mainwrapper {
  background-color: #FFFFFF;
}
#mainwrapper:after {
  content: "";
  display: table;
  clear: both;
}
#innerwrapper {
  width: 66.66%;
  margin: auto;
  display: table;
}
#innerwrapper .sidebar {
  width: 15%;
  background-color: #DFE2DB;
  display: table-cell;
}
.sidebar .menu li {
  display: block;
}
#innerwrapper > .content {
  width: 85%;
  display: table-cell;
}

<header>
  <div id="title">
    <h1>Something</h1>
  </div>
</header>
<div id="navwrapper">
  <div class="menu">
    <ul>
      <li>Test 1</li>
      <li>Test 2</li>
      <li>Test 3</li>
      <li>Test 4</li>
      <li>Test 5</li>
    </ul>
  </div>
</div>

<div id="mainwrapper">
  <div id="innerwrapper">
    <div class="sidebar">
      <div class="menu">
        <ul>
          <li>Test 1</li>
          <li>Test 2</li>
          <li>Test 3</li>
          <li>Test 4</li>
          <li>Test 5</li>
        </ul>
      </div>
      <div class="content">
        Phasellus quis libero eros. Maecenas at mauris ornare, vestibulum nulla sit amet, blandit mauris. Pellentesque ut luctus magna, vitae aliquam diam. Nam egestas urna quam, ac tincidunt lorem ornare non. Morbi non leo at enim lacinia tincidunt.
      </div>
    </div>
    <div class="content">
      <p>
        Integer quis auctor nibh, in pellentesque mi. In et rutrum mauris. Suspendisse rutrum bibendum arcu, non molestie orci iaculis id. Praesent ornare eros at nibh bibendum congue. Aliquam erat volutpat. Etiam sit amet ipsum eget lectus lobortis viverra ac
        sed dolor. Nunc tortor dolor, semper ac lobortis quis, ornare iaculis mauris. Donec convallis quis risus nec suscipit. Aenean vitae tempus sem. Nunc id sollicitudin leo, eu malesuada leo. Cras scelerisque, libero non tristique sollicitudin, metus
        lectus eleifend tellus, ac semper odio magna lacinia ex. Vestibulum ante libero, porttitor a turpis eget, mattis blandit ipsum. Nulla et ipsum vel mi aliquet porttitor non in enim. Sed nec nibh bibendum, facilisis lorem vel, tempus nisi. Sed cursus
        purus ac elit pulvinar, in fringilla quam eleifend. Fusce non commodo velit, eu tempus nisi. Phasellus lacus lorem, consectetur at metus ut, auctor pretium dui. Vestibulum elit diam, blandit ut neque vitae, tempor mollis ipsum. Vestibulum nec
        justo a augue mattis consectetur. In hac habitasse platea dictumst. Cras pharetra nisl eu nulla tempor convallis. Maecenas volutpat consequat luctus. Cras consequat, ligula in ullamcorper egestas, diam sapien aliquam quam, sed iaculis orci odio
        id dolor. Integer in dui vestibulum, dictum turpis mollis, rhoncus nisi. In hac habitasse platea dictumst. Praesent id velit euismod, molestie mi eu, volutpat metus. Quisque rhoncus ante id lectus accumsan, scelerisque consectetur velit efficitur.
        Maecenas aliquet fringilla feugiat. Aenean feugiat nulla ac tortor elementum, vel ultrices urna malesuada. Mauris et metus id velit semper dapibus sit amet nec mauris. Nulla lectus orci, semper vitae tortor nec, semper efficitur metus. Quisque
        accumsan, enim vel sollicitudin feugiat, augue velit tincidunt lorem, ac elementum metus leo id tortor. Sed interdum diam mi, nec cursus ante malesuada vel. Sed eu eros eget nisl congue bibendum ut vitae mi. Fusce a mi vel enim dignissim tempor.
        Mauris rutrum, arcu sit amet bibendum suscipit, metus tortor imperdiet lectus, non cursus felis risus sit amet tortor. Nullam eu ex a sapien faucibus vulputate vitae eu eros. Proin in enim blandit erat malesuada tincidunt at eu libero. Maecenas
        lacinia leo nibh, at pharetra quam iaculis ac. Nunc rutrum purus massa, sit amet rutrum nulla rhoncus sagittis. Duis varius felis eu nisi mattis venenatis. Etiam sit amet suscipit quam, sit amet ultrices dui. Etiam dapibus mollis orci, sed ultricies
        elit ornare et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci elit, vehicula et maximus non, posuere eu diam. Aenean quis cursus ipsum, sed mollis quam. Phasellus malesuada lacus
        at lacus lacinia imperdiet. Praesent hendrerit lacus at enim consequat, vel ultricies tellus laoreet. Etiam consectetur fringilla ipsum vel blandit. Morbi vehicula ante vel aliquet tincidunt. Vivamus dapibus blandit sodales. Pellentesque habitant
        morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam et eros ac nunc maximus pulvinar et id enim. Proin dignissim metus vitae placerat vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan
        hendrerit magna, eu porta dolor lacinia non. Ut ultrices aliquam arcu, non dictum turpis maximus a. Proin lacinia viverra nisi, ac interdum sapien. Aliquam facilisis et erat ac efficitur. Nulla sem diam, vulputate eget elit ut, porta viverra quam.
        Sed tincidunt augue eu odio volutpat, nec volutpat turpis scelerisque. Mauris at ex nunc.
      </p>
    </div>
  </div>
</div>

Answer 2

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

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

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

使 CSS 中具有相同父项的两个 div 的高度相等

Equalize height of two div with same parent in CSS

html

css

height