Philip Philip - 5 months ago 13
HTML Question

css - applying padding to box with scroll, bottom-padding doesn't work

I can't get bottom-padding to work when I use overflow-y: auto on a box.

HTML:

<div id="container">
<div id="some_info"></div>
</div>


CSS:

#container {
padding: 3em;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 300px;
background: red;
}

#some_info {
height: 900px;
background: #000;
}


Fiddle: http://jsfiddle.net/rwgZu/

EDIT: I use Firefox

Answer

Here is a possible approach that is working perfectly :

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
}

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}