CODEWITHSUNDEEP
htmlcss
panthro
panthro

Reputation: 24061

Absolute bottom position in scroll div?

Fiddle

I wish to align my buttons to the base of the container so I use:

.buttons{
    position: absolute;
    bottom: 0;
}

This is fine for when there is not much content (the pink div in the fiddle), but when there is a lot of content (the orange div in the fiddle), the container scrolls and the buttons are not at the bottom of the container.

How can I have it so that the buttons are at the bottom of the container when it doesn't have a lot of content and they are at the bottom of the scroll (below the content) when there is a lot of content.

Upvotes: 8

Views: 9358

Answers (3)

Otter
Otter

Reputation: 419

Just wrap the content in another div with position relative and put the absolute elements you wish to overlay in that parent div. It will act as an overlay of sorts and will ignore the scrolling. 👍

Upvotes: 0

Alvaro Menéndez
Alvaro Menéndez

Reputation: 9012

You have to add height:100%to html and body and then min-height:100%to your container like this (I have added a few more lines to make it look better):

body, html {height:100%; margin:0;}

* {box-sizing: border-box;}
.container{
    min-height: 100%;
  position: relative;
    padding-bottom:30px;
}
p {margin:0;}

.buttons{
    position: absolute;
    bottom:0;
}

.pink{
    background: pink;
}

.tomato{
    background: tomato;
}

Here you have the FIDDLE

(add more content to check it out)

EDITED (fixed height) Same concept just adding another container to use the min-height

NEW FIDDLE

Upvotes: 1

Davy
Davy

Reputation: 711

I added an .inner container that has a min-height. If the content in there is low, then the .inner container will push your buttons to the bottom. If the content is more, then the .inner container will grow along.

.inner {
    min-height: 149px;
}

Also note that the buttons have a position relative instead of absolute. When an element is absolute, it does not react to the page contents.

https://jsfiddle.net/76gbfrah/10/

Upvotes: 1

Related Questions