使孩子身高100%

Question

我有一个父section，min-height css 为 100% 。孩子是有height: 100%;的div。但是子div 不会占用整个父section

我想实现的是孩子将占据空间。

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
div {
  box-sizing: border-box;
}
.container {
  width: 100%;
  min-height: 100%;
  background-color: red;
}
.content {
  width: 100%;
  height: 100%;
  background-color: blue;
}

<section class="container">
  <div class="content">
    HEY!
  </div>
</section>

Answer 1

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
div {
  box-sizing: border-box;
}
.container {
  width: 100%;
  height: 100%;
  background-color: red;
  display: block;
}
.content {
  width: 100%;
  min-height: 100%;
  background-color: blue;
  display: block;
}
#child1 { 
  background-color: blue; 
}
#child2 { 
  background-color: yellow; 
}

<section class="container">
  <div class="content" id="child1">
    HEY Child 1 See Child 2 down!
  </div>
  <div class="content" id="child2">
    HEY Child 2!
  </div>
</section>

Answer 2

只需将position:absolute添加到子元素。

如果希望父元素是相对的，请将position:relative添加到父元素。

相对位置：相对定位的元素相对于其正常位置进行定位。

要了解有关相对和绝对位置的更多信息，请访问：样式="位置：绝对"和样式="位置：相对"之间的区别

     html,
    body {
      height: 100%;
      width: 100%;
      padding: 0px;
      margin: 0px;
    }
    div {
      box-sizing: border-box;
    }
    .container {
      width: 100%;
      min-height: 100%;
      background-color: red;
    }
    .content {
      width: 100%;
      height: 100%;
      color:white;   
      position: absolute;   
      background-color: blue;   
    }

  <section class="container">    
      <div class="content">    
        HEY!   
      </div>   
    </section>    

Answer 3

你应该试试这个：

只需添加

position: absolute;

在子 CSS 类中。

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
div {
  box-sizing: border-box;
}
.container {
  width: 100%;
  min-height: 100%;
  background-color: red;  
}
.content {
  width: 100%;
  height: 100%;
  background-color: blue;
  position: absolute;
}

<section class="container">
  <div class="content">
    HEY!
  </div>
</section>