页脚 DIV 出现在具有两个子 DIV 的容器 DIV 上答案

【问题标题】：Footer DIV comes up on Container DIV having two children DIVs页脚 DIV 出现在具有两个子 DIV 的容器 DIV 上
【发布时间】：2013-10-04 05:41:22
【问题描述】：

容器：相对定位。有两个子 div left 和 right column，分别占容器宽度的 60% 和 30%。

左孩子：绝对定位。 Top:0;左：0；宽度：60%； 右孩子：绝对定位。 Top:0;对：0；宽度：30%；

页脚：相对定位。

但是页脚出现了。代码如下。访问following code LIVE here 谁能告诉我以下代码有什么问题，我认为在技术上都是正确的。

<style type="text/css">
    #container {
    position: relative;
    margin:0 auto;
    width: 1000px;
    background: #C63;
    padding: 10px;
    height:auto;
}

#leftCol {
    position: absolute;
    top:10px;
    left:10px;
    background: #e8f6fe;
    width: 60%;
}

#rightCol {
    position: absolute;
    top:10px;
    right:10px;
    width:30%;
    background: #aafed6;
    }

.box {
    position:relative;
    clear:both;
    background:#F39;
     }

</style>

  <div id="container">

  <div id="leftCol">
       <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
       <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
       <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
       <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
   </div>

<div id="rightCol"> 
          <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
          <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

    </div>

 </div>

 <div class="box">
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>

【问题讨论】：

标签： html layout

【解决方案1】：

您应该从<div id="container"> 内的<div> 标记中保留position: absolute 规则。并且还应该将规则display: inline-block;添加到左右<div>标签：

<style type="text/css">
    #container {
    position: relative;
    margin:0 auto;
    width: 1000px;
    background: #C63;
    padding: 10px;
    height:auto;
    }
    #leftCol {
    display: inline-block;
    top:10px;
    left:10px;
    background: #e8f6fe;
    width: 60%;

    }
    #rightCol {
    display: inline-block;
    top:10px;
    right:10px;
    width:30%;
    background: #aafed6;
    }

    .box {
    position:relative;
    clear:both;
    background:#F39;
    }
    </style>

    <div id="container">
    <div id="leftCol">
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
     <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    </div>
    <div id="rightCol"> 
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    </div>
    </div>

    <div class="box">
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
    </div>

【讨论】：

嗨，你几乎是正确的，但不是 100% ，因为 #rightCol 应该放在容器 DIV 的 top:10, right:10 内。
但我添加了 position: absolute;在上面提到的代码中的 #rightCol 样式中，将 rightcol DIV 放置在正确的位置，但是 position: absolute;不应同时应用于 DIV #rightCol 和 #leftCol，如果这样做，DIV 容器将缩小。
我的问题是为什么这个 CONTAINER 会缩小并且它刚刚出现在我的脑海中.. right 和 leftcol 子 DIVS 有内容，所以它们有一些没有明确定义的高度。但是当它们变成绝对职位时，它们会从文档流中飞出……所以容器没有得到它们的高度，所以……容器缩小了……你说什么？
使用position: absolute; 时，无论标签的位置如何，都会定位此内容。所以这就是你的页脚流动的原因，因为它没有在上面找到任何东西，而是position: absolute; 标记，它没有被考虑。

【解决方案2】：

将 margin 0 auto 更改为 margin: 0 auto 228px;

演示：http://jsfiddle.net/KwB5r/

#container {
    position: relative;
    /*margin:0 auto;*/
    margin: 0 auto 228px;
    width: 1000px;
    background: #C63;
    padding: 10px;
    height:auto;
}

或将容器的heigth 设置为228px，例如

【讨论】：

【解决方案3】：

您必须提及 #container div 的高度。像这样

#container {
  background: none repeat scroll 0 0 #CC6633;
  height: 240px; // mention height
  margin: 0 auto;
  padding: 10px;
  position: relative;
  width: 1000px;
}

【讨论】：

// 在 css 中仅在 javacript 中无效
哦，拜托，它的目的是让询问者更清楚了解更改的属性。我知道它只在 JS 中有效。