Child elements are not contained in viewport height even if parent's height is set to be `100vh`

Question

.parent{
  background: #64B5F6;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
}

.child1 {
  background: #42A5F5;
  height: 100%;
}

.child2{
  background: #FFEB3B;
  height: 100%;
}

.img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class='parent'>
  <div class='child1'>
    <img class='img1'src="https://images.unsplash.com/photo-1597594879431-8aecf7c2dd49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
  <div class='child2'>
    <img class='img2'src="https://images.unsplash.com/photo-1598505628759-67b9346af31c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
</div>

In the above code I have set parent's height to be 100vh. Which means it should be contained in the viewport's height. But its child elements are extending this height. I ran this inside codepen.io and saw that parent now is not of height of viewport but more than that. I don't know what I am doing wrong here.

I just viewed the dimensions of `.parent` and its child elements using dev tools, they have the same height. Maybe you are wondering why there is vertical scrollbar? — Yousaf, Sep 09 '20 at 14:19
@Yousaf the height will be same but as I have set parent's height to be `100vh` it should not extend the viewport height. But they are extending the viewport height. — unpredictable, Sep 09 '20 at 14:20
Yes, height of child elements is same as that of parent. I am not sure what you are confused about. To remove the vertical scrollbar, remove the margin on the `body` element. `body { margin: 0 };` — Yousaf, Sep 09 '20 at 14:21
@Yousaf I have reframed the question for better understanding. Can you see it now? — unpredictable, Sep 09 '20 at 14:23

score 2 · Accepted Answer · answered Sep 09 '20 at 14:27

All that's wrong is that the body element has a default margin of 8px, so this is adding 16px to the height.

To fix ie, you just need to set the margins to 0, so add this to the start of your CSS:

body { margin:0;}

Working Example:

body { margin:0;}

.parent{
  background: #64B5F6;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
}

.child1 {
  background: #42A5F5;
  height: 100%;
}

.child2{
  background: #FFEB3B;
  height: 100%;
}

.img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class='parent'>
  <div class='child1'>
    <img class='img1'src="https://images.unsplash.com/photo-1597594879431-8aecf7c2dd49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
  <div class='child2'>
    <img class='img2'src="https://images.unsplash.com/photo-1598505628759-67b9346af31c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image">
  </div>
</div>

Child elements are not contained in viewport height even if parent's height is set to be `100vh`

1 Answers1