0

I've looked at many answers to this question but none of them seem to solve my issue. I have a div set to 100% height but it adds a vertical scrollbar to my site. Why is 100% height adding a vertical scrollbar? How can I remove it and still have it be 100% height?

Solutions recommended:

  • 100% height on html & body
  • overflow: hidden;
  • * {overflow:hidden;}

None of these solve my issue

Example of my issue (div three adds a scrollbar if height is set to 100%)

https://jsfiddle.net/wqy0bx5b/

Code:

HTML//

<div class="one"></div>
<div class="two"></div>
<div class="three">
  <h1>Hello</h1>
</div>
<div class="four">
  <h1>Hello</h1>
</div>

CSS//

*{
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.one {
  width: 100%;
  height: 50px;
  background-color: #c4c9d4;
}
.two{
  width: 100%;
  height: 80px;
  background-color: #a7aebe;
}
.three{
  width: 20%;
  height: 100%;
  overflow: hidden;
  float: left;
  background-color: #8a93a8;
}
.four{
  width: 80%;
  float: left;
  background-color: #576075;
}
Sergio Estrada
  • 236
  • 2
  • 9
  • 6
    Because `.three` has a height of 100% also, this is being added to the 130px of `.one` & `.two`. - https://jsfiddle.net/wqy0bx5b/1/ – Paulie_D Jun 29 '16 at 16:17
  • 2
    I really don't see what your issue is..? 50px + 80px + 100% of the container (this being body) - is 100%+130px. The example you provided is doing exactly what you told it to. – Gavin Thomas Jun 29 '16 at 16:19
  • Thank you! @Paulie_D That's a solution I've never seen be used. Never used calc, thanks. – Sergio Estrada Jun 29 '16 at 16:20
  • 1
    If you want more flexibility with your layout, see [this question](http://stackoverflow.com/q/90178/5743988). In particular, a flexbox or CSS table layout may work for you. – 4castle Jun 29 '16 at 16:26

1 Answers1

0

Paulie_D solved my issue.

Div three needed: 

height: calc(100% - 130px);

I didn't realize the height of div 1 & 2 were already being added to the 100% height of div 3. Haven't heard of calc till now, thanks Paul.

Community
  • 1
  • 1
Sergio Estrada
  • 236
  • 2
  • 9