Question

我想让黄色和粉红色区域（div p2和p2c1）与其父级相匹配，即白色。

当我尝试height: 100%时，它会覆盖整个屏幕，而不仅仅是父div。

＆＃13;

body {
  background: #EEE;
}
#container {
  display: float;
  float: left;
  width: 50%;
  background-color: white;
}
#p1 {
  display: float;
  float: left;
  width: 50%;
  background-color: blue;
}
#p2 {
  display: float;
  float: left;
  width: 50%;
  background-color: yellow;
}
#c1 {
  display: float;
  width: 100%;
  background-color: green;
}
#c2 {
  display: float;
  width: 100%;
  background-color: grey;
}
#p2c1 {
  background-color: pink;
}

＆＃13;

<div id="container">
  <div id="p1">
    <div id="c1">Content here gdfgd gdf</div>
    <div id="c2">aaaaa logkljfd lkfj skfjs] lkdjf lsdkjfsdlkjfsdk ljflkdsjfljsd
    </div>
  </div>
  <div id="p2">
    <div id="p2c1">
      blah blah blah
    </div>
  </div>
</div>

＆＃13;

Answer 1

首先，您应该将height设置为container div。然后你可以设置儿童div的高度。

SEE DEMO

更新：如果您不想修复容器的高度，可以设置position:relative并设置position:absolute;您想要的div，将解决问题。注意：您应该将min-height设置为背景颜色的绝对div。

Answer 2

首先，您应为height div设置container值：

例如：

#container {
    display: float;
    float: left;
    width: 50%;
    height:50%;
    background-color: white; 
}

目前，这个div的高度是屏幕的整个高度，因此就是你所看到的行为。

如何使div与父级匹配

2 个答案: