CODEWITHSUNDEEP
csshtml
DemCodeLines
DemCodeLines

Reputation: 1920

padding-top issues in div

I have a div and for some reason there are regular scrollbars on the page even though there is nothing in the div. The div is set to 100% height and overflow:auto but the scrollbars still appear even when there is no content.

To test something, I put the following in the div style:

padding-top:500px

What it did was leave that 500px space from top and then display the text I had but after that the same amount of space was there too.

So it was something like this:

|       |
| 500px |
|       |
| xxx   |
|       |
|       | -> See that extra space after the content?
|_______|

Please help

HERE IS SAMPLE CODE: http://jsfiddle.net/Saq4T/

Upvotes: 1

Views: 2507

Answers (1)

bookcasey
bookcasey

Reputation: 40473

Padding is added on to the overall height, not included in it. Read about the box model.

Therefore, a div with 100% height and 500px padding really 100% + 500px tall.

Add margin-bottom:-500px; if you still want padding but don't want the scrollbar.

Upvotes: 4

Related Questions