Question

当元素在相对定位的元素中浮动时，如何使高度填充父元素？

<div id="page">
  <div id="left"></div>
  <div id="right"></div>
</div>

#page {
  width: 980px;
  padding: 10px;
  background: #3C4B76;
  display: block;
  margin: 10px auto auto auto;
  position: relative;
}

#left {
  padding: 0;
  margin: 0;
  width: 230px;
  float: left;
}

#right {
  float: right;
  width: 720px;
  border-left: 1px solid white;
  padding: 5px 5px 5px 20px;
  height: 100%;
  position: relative;
  display: block;
}

在此示例中，#right元素未填充'#page'元素，它只会增长到与内容一样大。如果它小于#page，我希望#right填充父级。

Answer 1

为父母试试这个：

overflow:auto;

另一种解决方案：

<强>父：

display: table;

儿童：

display: table-row;

选中此fiddle

<强>更新要使用跨浏览器CSS设置相等的高度列，您应该阅读此Matthew James post

Answer 2

复制粘贴以下内容

CSS：

#page {
    width: 980px;
    padding: 10px;
    background: #3C4B76;
    display: block;
    margin: 10px auto auto auto;
    position: relative;
}  

#left {
    padding: 5px 0;
    margin: 0; width: 230px;
    float: left;
}  

#right {
    float: right;
    width: 720px;
    border-left: 1px solid white;
    padding: 5px 5px 5px 20px;
    height: 100%;
    position: relative;
    display: block;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

HTML：

<div id="page" class="clearfix">
   <div id="left">left</div>
   <div id="right">right</div>
</div>

小提琴链接：

http://jsfiddle.net/uExdD/9/

Answer 3

万一其他人找到了这个旧帖子，进行清除的新方法是：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Answer 4

只需给它与父级相同的高度，并将clearfix应用于父级。

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

向右浮动并填充父级

4 个答案: