CODEWITHSUNDEEP
htmlcss
OammieR
OammieR

Reputation: 2860

Bottom:0 not working when overflow-y appear

Please look at my jsFiddle http://jsfiddle.net/LY8ze/1/

In my div have content and footer.(2 sections) The footer must stay at bottom:0.

When the scroll bar is not appearing. The footer is showing correctly. But when the scroll bar is appearing, the footer doesn't stay at bottom. You can see it in my jsFiddle as the first figure.

How can I fix that by using only css and html?

Upvotes: 1

Views: 276

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157384

What you are looking for is position fixed, but it will fail in your case, you need to use jQuery for this, or else you can spoof it by using a container element and than change the markup accordingly

Demo

Or even a better solution (Works for both, 1st and 2nd case)

1.
<div class="wrap">
<div class="container">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus.
        <br />
        <img src="http://i.imgur.com/RKA1Kkk.jpg" style="width:250px;height:150px" />
</div>
    <div class="footer">
        Author : OammieR
    </div>
</div>

CSS

.container {
    height: 250px;
    overflow-y: auto;
    position: relative;
    width: 300px;
    word-wrap: break-word;
    margin:10px;
    padding:5px;
    background-color:#C1C2C3;
}

.wrap {
    background: #c1c2c3;
    width: 330px;

}

.footer {
    color:red;
    padding-left: 15px;
    padding-bottom: 10px;
}

Upvotes: 2

Falguni Panchal
Falguni Panchal

Reputation: 8981

may i sure try this :

CSS

.container {
    background-color: #C1C2C3;
    margin: 10px;
    min-height: 250px;
    overflow-y: auto;
    padding: 5px;
    position: relative;
    width: 300px;
    word-wrap: break-word;
}

Upvotes: 0

Vivek Sadh
Vivek Sadh

Reputation: 4268

Use:-

.footer {
    bottom: 0;
    position: relative;   // changed from absolute to relative
    color:red;
}

Upvotes: 0

Related Questions