Make the child height 100%

Question

I have a parent section with a min-height css of 100%. The child is a div with height: 100%;. But the child div does not occupy the whole parent section

What I'm trying to achieve is the child will occupy the space.

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>

try it .content { width: 100%; height: 100vh; background-color: blue; } — Jordi Jordi, Jul 29 '19 at 08:08
I have to use `min-height` there are other child elements. I just want the `.content` to be have the same height with the window — , Jul 29 '19 at 08:14

Giddy Naya · Answer 1 · 2019-07-29T08:21:11.300

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>

edited Jul 29 '19 at 08:21

answered Jul 29 '19 at 08:07

Giddy Naya

4,237
2
17
30

I have to use min-height there are other child element. I just want the .content to be have the same height with the window – Jul 29 '19 at 08:14

Amaresh S M · Accepted Answer · 2019-07-29T08:28:53.930

just add position:absolute to the child element.

If you want the parent element to be relative then add position:relative to parent element.

Relative Position: A relative positioned element is positioned relative to its normal position.

To know more about relative and absolute position visit:Difference between style = "position:absolute" and style = "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>

score 0 · Answer 3 · answered Jul 29 '19 at 08:19

You should try this :

Just add

position: absolute;

in child css class.

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>

Make the child height 100%

3 Answers3