Setting the height to 100% on the div causes a vertical scrollbar

Question

There are only 3 lines of text in the div body. The background color was filled only up to three lines of text.

Since I wanted the color to fill 100% of the browser vertical, I just set the CSS html and body properties to 100% . But now a vertical scrollbar appears. How can I hide / delete it?

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

CSS

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

HTML:

 <div class="logodiv"> ITEMS LIST </div> <div class="content"> line1<br> line2<br> line3<br> </div> 

Answer 1

Make logodiv absolutely positioned:

http://jsfiddle.net/Gcduf/

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

Answer 2

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

 .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. . To reduce the content of the .content element, I used the ::before pseudo-element selector ::before another option:

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: Currently, all major modern browsers support ::before pseudo-element and / or box-sizing . But if you're looking for the traditional way to support all browsers, you can create a .spacer unit as the first child of .content and set height: 40px; at .spacer .

JSBin Demo # 3

Answer 3

You have a .logodiv with height: 40px .

And you have .content with height: 100% .

Add these two together, and the sum exceeds the height: 100% their container ( body ). This is the reason for the vertical scrollbar.

Try the following:

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

DEMO: http://jsfiddle.net/y04jgbaz/

The calc() function allows you to use mathematical expressions with the addition of (+), subtraction (-), multiplication (*) and division (/), which will be used as component values.

Browser support is good too: http://caniuse.com/#search=calc