将高度 100% 设置为 div 会导致垂直滚动条

Question

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>

Answer 1

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

Answer 2

Make logodiv absolutely positioned:

http://jsfiddle.net/Gcduf/

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

Answer 3

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.