為什么我的柱子沒有擴大到容器的高度？

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

我已經更新了您的代碼，並使用了技巧來獲得結果。

驗證碼

Answer 2

希望我的回答對您有幫助

HTML

    <div id="container">
   <div id="header">header</div>
   <div id="nav">
    <p><a href="stat.html">link 1</a></p>
    <p><a href="interview.html">link 2</a></p>
    <p><a href="ask.html">link 3</a></p>
   </div>
   <div id="aside">
    <h3>text</h3>
    <p>text2</p>
    <p>text3</p>
    <p>text4</p>
   </div> 
   <div id="content"> 
   <h2>head text</h2>
    <ul>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
    </ul>
   </div>
   <div id="footer">&copy; user</div>
  </div>

DEMO

Answer 3

只需添加您的CSS

html，正文{高度：100％; }

然后您可以根據自己的意願在divourcentage中設置div的左右高度...

和

    <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>
        <div class="bloque" id="right">
              Bloque-3
        </div>
        <div class="bloque" id="foot">
          Pie
        </div>
    </div>