html - CSS 拉伸(stretch)元素

Question

我有如下的html

<div>
   <div class="left">
   </div>
   <div class="center">
   </div>
   <div class="right">
   </div>
</div>


.left
{
  background: none repeat scroll 0 0 white;
  border-right: 1px solid #C3C3C3;
  float: left;
  margin-top: 30px;
  min-height: 100%;
  position: absolute;
  width: 170px;
}

.center
{
  background: none repeat scroll 0 0 white;
  float: left;
  margin-left: 171px;
  margin-top: 30px;
  min-height: 100%;
  position: absolute;
  width:895px;
}

.right
{
  background: none repeat scroll 0 0 #DEDFE8;
  border-left: 5px solid #BDC1DE;
  float: right;
  margin-top: 30px;
  min-height: 100%;
  position: absolute;
  width: 276px;
}

当中心面板拉伸(stretch)时，左右面板保持在 100% 的高度

有没有办法在中心面板拉伸(stretch)时拉伸(stretch)左右面板。

编辑

当中心面板包含使中心 div 扩展超过 100% 的最小高度的 html 控件时，左右面板不会扩展，并且这些面板具有不同的颜色和边框，并且页面看起来不正确当左右面板不展开而中间面板展开时，可以看到间隙。

Answer 1

我个人喜欢 www.ejeliot.com 的等高栏

http://jsfiddle.net/spacebeers/s8uLG/3/

您将容器设置为 overflow hidden ，然后在每个 div 上添加负边距底部和相等的正填充底部。

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

Faux Columns 也不错，而且可能更容易设置，但如果您真的反对使用图像，这是一个非常好的方法。