CODEWITHSUNDEEP
htmlcss
Sergio Estrada
Sergio Estrada

Reputation: 236

Why is 100% height adding a vertical scrollbar?

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:

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;
}

Upvotes: 0

Views: 2988

Answers (1)

Sergio Estrada
Sergio Estrada

Reputation: 236

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.

Upvotes: 0

Related Questions