树浮动 div 高度 100%，一个固定宽度 - 中间覆盖答案

【问题标题】：Tree floating divs height 100%, one fixed width - middle overlows树浮动 div 高度 100%，一个固定宽度 - 中间覆盖
【发布时间】：2013-01-06 09:54:14
【问题描述】：

我想在中心有一个固定宽度（1000px）的 div，一个 div 向左浮动并填充背景，另一个 div 在右侧填充背景。都有 100% 的高度。

<div id="left">
</div>
<div id="right">
</div>
<div id="main">
   Text
</div>

CSS：

html, body{
height:100%;
min-height:100%;
width:100%;

padding:0;
margin:0;
}

#left{
position: relative;
width:50%;
height:100%;
top:0;
left:-500px;
float:left;
}
#right{
position:relative;
width:50%;
height:100%;
top:0;
right:-500px;
float:right;
}

#main{
width: 1000px;
margin:auto;
}

问题是内容脱离了中间 div。它仍在 div 中，但在其他 div 之下。

我该如何解决，内容显示在中间 div 的顶部？

为了更好的想象：http://codepen.io/anon/pen/eluGt

【问题讨论】：

标签： html css alignment

【解决方案1】：

试试这个...我认为这是你所追求的

    <!DOCTYPE html>
 <html>
      <head>
       <title>Failing Divs</title>
     </head>
    <body>
        <div id="left">
        </div>
      <div id="main">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <div id="right">
        </div>

   </body>
</html>

...

html, body{
    height:100%;
    min-height:100%;
    width:100%;

    padding:0;
    margin:0;
}

p{
 padding:5px; 
}

#left{
    float:left;
    width:25%;
    height:100%;
    background: black;
}
#right{
    float:left;
    width:25%;
    height:100%;
    background: blue;
}

#main{
    float:left;
    width: 50%;
    height:100%;
    margin:auto;
    background: gray;
}

【讨论】：

不，我实际上想要一个中心固定宽度为 1000 px 的 div，以及填充左右背景的两个 div
好吧，你不能真正使用左右 div 的百分比，因为它们会不均匀。如果您要使其适合您的特定屏幕，只需获取宽度，从中取 1000 并拆分剩下的内容以定义左右 div 的宽度......我所做的确实解决了文本位于底部的问题:D