左侧边栏动态向下延伸到底部

Question

我的左侧边栏是固定宽度（px），我的主要内容是右侧。

以下是我的演示：http://jsfiddle.net/fxWg7/4031/

以下是代码：

这是我的HTML代码：

<div class="left">
  left content fixed width
</div>
<div class="right">
  right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br> right content flexible width
  <br>
  <br>
</div>

这是我的CSS：

.left {
  width: 180px;
  float: left;
  background: #aafed6;
}

.right {
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

我怎样才能使左侧边栏的高度与主要内容动态的长度相同？

Answer 1

在父级上使用display: flex，两个子级都将拉伸以匹配父级的高度。

＆＃13;

＆＃13;

.container {
  height: auto;
  overflow: hidden;
  display: flex;
}

.left {
  width: 180px;
  background: #aafed6;
}

.right {
  background: #e8f6fe;
}

＆＃13;

<div class="container">
  <div class="left">
    left content fixed width
  </div>
  <div class="right">
    right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或display: table;

＆＃13;

＆＃13;

.container {
  height: auto;
  overflow: hidden;
  display: table;
  width: 100%;
}

.left, .right {
  display: table-cell;
}

.left {
  width: 180px;
  background: #aafed6;
}

.right {
  background: #e8f6fe;
}

＆＃13;

<div class="container">
  <div class="left">
    left content fixed width
  </div>
  <div class="right">
    right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible width
    <br>
    <br> right content flexible wid
    </div>

＆＃13;

＆＃13;

＆＃13;