Question

我试图平衡两个div的高度， #innerwrapper .sidebar 和 #innerwrapper＆gt; .content ，彼此相邻（通过 float：left ）来自同一个父 #innerwrapper 。

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

下面给出了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

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

我删除了所有jQuery，并使用CSS放置在display: table-cell;所需的内容中。

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

在CSS中使用相同父项均衡两个div的高度

2 个答案: