html - 为什么我的列没有扩大到容器高度？

Question

我想让左右两列扩大到中心列的高度，但它们没有扩大，而且布局很糟糕。

我需要一个简单的三列布局，但我不想要以像素或 em 为单位的固定尺寸。

HTML代码:

<div id="contenedor">
<div class="bloque" id="head">
  Cabecera
</div>
<div class="bloque" id="left">
  Bloque-2
</div>
<div id="contenido">
<div class="bloque" id="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut justo sed nisl commodo imperdiet vitae molestie orci. Cras urna sem, malesuada et feugiat sed, accumsan nec dolor. Vivamus hendrerit ante non urna bibendum, et tristique libero ultrices. Phasellus auctor tempor leo, quis pretium nisl posuere sit amet. Vestibulum eget erat dolor. Integer venenatis eu libero ac pharetra. Nullam nec ligula et quam bibendum semper. Phasellus ...
</div>
  <div class="bloque" id="right">
  Bloque-3
</div>
  </div>
<div class="bloque" id="foot">
  Pie
</div>
</div>

CSS 代码:

#contenedor {
  background-color: #EEE;
  width: 100%;
  height: 100%;

}

.bloque {
  background-color: #CCC;
}

#head {
  width: 100%
  height: 10%;
  text-align: center;
}

#left {
  width: 25%;
  float: left;
  min-height: 85%;
}

#right {
  width: 20%;
  float: left;
  min-height: 85%;
}

#center {
  width: 55%;
  float: left;
  background-color: #FFF;
}

#foot {
  clear: both;
  text-align: center;
  min-height: 5%;
}

CSSDeck.com

Answer 1

我已经更新了您的代码并使用了一个技巧来获得结果。

UPATED CODE