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

当中心面板拉伸时，左右面板保持在100％的高度

当中心面板伸展时，是否有拉伸左右面板的方法。

修改

当中心面板由html控件组成，使得中心div扩展超过最小高度100％时，左右面板不会展开，这些面板有不同的颜色和边框，页面看起来不正确在右侧和左侧面板不展开且中心面板不起作用后，可以看到间隙。

Answer 1

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

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

你设置你的容器，溢出设置为隐藏，然后在每个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也很好，可能更容易设置，但如果你真的死于使用图像，这是一个非常好的方法。

Answer 2

根据您的修改，您的意思是希望他们垂直展开。有几种方法可以做到这一点，但我最喜欢的是faux columns。

你基本上把你的列颜色的背景放在整个包含div的背景上，它给出了所有三列都是相同高度的错觉。

你仍然想要解决你的定位问题。正如我之前提到的，position:absolute应该与top, left, bottom或right一起使用。或者，您可以使用floats而不是绝对定位。你不能同时使用两者：）

Answer 3

设置包含以下div的外部div的宽度：100％，position：absolute和min-height：100％

然后将css更改为此

.left
{
  background: none repeat scroll 0 0 white;
  border-right: 1px solid #C3C3C3;
  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;
  width:895px;
}

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

<div class="width:100%;position:absolute;min-height:100%">
   <div class="left">
   </div>
   <div class="center">
   </div>
   <div class="right">
   </div>
</div>

CSS拉伸元素

修改

3 个答案: