Question

我希望左右列放大到中心列高度，但它们不会扩展，布局也很糟糕。

我需要一个简单的三列布局，但我不想要像素和ems的固定尺寸。

HTML code：

<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

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

你可以根据自己的意愿在pourcentage中左右分别设置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>

为什么我的柱子没有扩大到容器高度？

3 个答案: