4

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

<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填充父级。

4

4 回答 4

5

为父母试试这个：

overflow:auto;

另一种解决方案：

家长：

display: table;

孩子：

display: table-row;

检查这个小提琴

更新： 要使用跨浏览器 CSS 设置等高列，您应该阅读这篇Matthew James 帖子

于 2012-10-29T18:07:02.570 回答
1

复制粘贴以下内容

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/

于 2012-10-29T18:05:39.150 回答
1

万一其他人发现这篇旧帖子，进行 clearfix 的新方法是：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
于 2020-02-11T13:04:13.360 回答
0

只需给它与父级相同的高度并将 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 */
于 2012-10-29T17:57:20.513 回答