CODEWITHSUNDEEP
htmlcss
Ruby
Ruby

Reputation: 969

Setting height 100% to div causes vertical scrollbar

There are only 3 lines of text in a div in body. The background color was filling only up to those 3 lines of text.

As I wanted the color to fill up 100% vertical of the browser, I just set the CSS height properties of html & body to 100%. But the vertical scrollbar shows up now. How can I hide/remove it?

I tried overflow:hidden for html as well as div properties but no luck. Using Firefox.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.logodiv {
  width: 100%;
  background-color: #243640;
  height: 40px;
  color: #FF1442;
}

.content {
  /* Firefox 3.6+ */
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<div class="logodiv">
  ITEMS LIST
</div>
<div class="content">
  line1<br> line2
  <br> line3
  <br>
</div>

Upvotes: 6

Views: 4487

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 370993

Use the calc() function.

Make this adjustment to your code:

.content { height: calc(100% - 40px); }


.logodiv {
  height: 40px;
  background-color: #243640;
  color: #FF1442;
}

.content {
  height: calc(100% - 40px);
}

body {
  height: 100vh;
}

* {
  margin: 0;
  padding: 0;
}
<div class="logodiv">
  ITEMS LIST
</div>
<div class="content">
  line1<br> line2
  <br> line3
  <br>
</div>

You've got .logodiv with height: 40px.

And its sibling .content with height: 100%.

Add these two together and they overflow the height of their container (body). That's the reason for the vertical scrollbar.

With the calc() function you can set up mathematical expressions using addition (+), subtraction (-), multiplication (*), and division (/) as component values.

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99464

Use min-height: 100% instead and add a negative margin to .content to shift it up:

.logodiv {
  position: relative;
  z-index: 10;
}

.content {
  background-color: gold;
  min-height:100%;
  margin-top: -40px;
}

.content:before {
  content: ' ';
  display: block;
  height: 40px;
}

JSBin Demo #1

Note: In order to push down the content of .content element, I used ::before pseudo-element selector, another option could be:

Using box-sizing: border-box and padding-top: 40px CSS declarations:

.content {
  background-color: gold;
  min-height:100%;
  margin-top: -40px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  padding-top: 40px;
}

JSBin Demo #2

PS: Nowadays, All major modern browsers support ::before pseudo-element and/or box-sizing property. But if you're looking for the traditional way which all browsers support, you can create a .spacer division, as the first child of .content element and set height: 40px; to .spacer.

JSBin Demo #3

Upvotes: 1

matthewpavkov
matthewpavkov

Reputation: 2928

Make logodiv absolutely positioned:

http://jsfiddle.net/Gcduf/

.logodiv
{
    width:100%;
    background-color:#243640;
    height:40px;
    color:#FF1442;
    position: absolute;
    top: 0;
}

Upvotes: 0

Related Questions