CODEWITHSUNDEEP
htmlcssscrollinternet-explorer-11
R. Groot Jebbink
R. Groot Jebbink

Reputation: 147

IE 11: Element with min-height: 100vh will cause scrollbar

I already read a lot of posts about IE 11 with display: flex and min-height, but didn't find my answer.

I have a normal <div> with a min-height: 100vh;. In that <div> I have another element with a margin-bottom: 5px;. Now the whole outer <div> has a scrollbar and a transparent border at the bottom of 5px.

When I increase the margin, the gap at the bottom will increase the same.

Example:

<div class="layout">
   <div class="panel">
      Some content
   </div>
</div>


body {
  margin: 0;
}

.layout {
  min-height: 100vh;
  background: orange;
}

.panel {
  margin-bottom: 40px;
  background: white;
  border-radius: 5px;
  padding: 5px;
}
<div class="layout">
  <div class="panel">
    Panel
  </div>
</div>

Now I made the code snipper, I see it also going wrong in Chrome.

I hope you understand me, but if you need more info please ask. I hope to find an answer!

Thank you, Ronald.

Upvotes: 1

Views: 746

Answers (1)

August
August

Reputation: 2113

Your issue is because of margin collapsing and it could be fixed in different ways.

Depending on your case, easiest is to use overflow: hidden for .layout:

.layout {
  min-height: 100vh;
  background: orange;
  overflow: hidden;
}

You could also use padding-bottom on .layout instead of margin-bottom on .panel to avoid the issue with margins.

Another option could be clearfixing the .layout like so:

.layout:before,
.layout:after {
    content: ' ';
    display: table;
}

Upvotes: 1

Related Questions