html - 使 div 高度延伸到另一个 div

Question

这是我的代码:http://jsfiddle.net/fxWg7/4041/

我想让左侧边栏动态地向下延伸到页脚。页脚是粘性页脚，这意味着无论主要内容有多长，它都会留在下面。

无论主要内容的高度如何，我都希望左侧边栏向下延伸到页脚。

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0 0 50px;
  /* bottom = footer height */
}

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

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

.right {
  float: none;
  /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the other floated one */
  width: auto;
  overflow: hidden;
}

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

<div class="container">

  <div class="left">
    left content fixed width
    <br>
    <br> I want this to extend to footer!
  </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
  </div>

</div>

<footer>
  This is my footer.
</footer>

Answer 1

更新:

下面的 css 代码可以做到这一点:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  display: flex;
  flex: 1;
}

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

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

footer {
  width: 100%;
  background-color: #000;
  color: #fff;
  padding: 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

查看 jsfiddle - http://jsfiddle.net/jalenconner/be71229w/1/

此解决方案使用 CSS Flexbox，您可以在此处了解更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/