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

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

如何才能使左侧边栏的高度动态拉伸(stretch)到与主要内容相同的长度？

Answer 1

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

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

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

.right {
  background: #e8f6fe;
}

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

或显示:表格；

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

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

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

.right {
  background: #e8f6fe;
}

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