40

I have a DIV that needs to be aligned to the bottom of a search result page, problem is whenever there is no search result or less rows of search result displayed on the page, the DIV goes up from the bottom of the page.

enter image description here

but it should be placed like this

enter image description here

and whenever there are more rows and the page can be scrolled down, the DIV should be place like this.

enter image description here

My currrent code looks like this

        <div id="bottom-stuff>

            <div id="bottom">
                             // DIV stuff
            </div>

        </div>


#bottom-stuff {
    padding: 0px 30px 30px 30px;
    margin-left:150px;
    position: relative;
}

#bottom{

    position: absolute; bottom: 0px; 
}
Naveen Gamage
  • 1,844
  • 12
  • 32
  • 51

6 Answers6

56

Right I think I know what you mean so lets see....

HTML:

<div id="con">
   <div id="content">Results will go here</div>
   <div id="footer">Footer will always be at the bottom</div>
</div>

CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
div {
    outline: 1px solid;
}
#con {
   min-height:100%;
   position:relative;
}
#content {
   height: 1000px; /* Changed this height */
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
}

This demo have the height of contentheight: 1000px; so you can see what it would look like scrolling down the bottom.

DEMO HERE

This demo has the height of content height: 100px; so you can see what it would look like with no scrolling.

DEMO HERE

So this will move the footer below the div content but if content is not bigger then the screen (no scrolling) the footer will sit at the bottom of the screen. Think this is what you want. Have a look and a play with it.

Updated fiddles so its easier to see with backgrounds.

Ruddy
  • 9,795
  • 5
  • 45
  • 66
  • 1
    Thank's @Ruddy. Using this as a base, I got a footer component working with VuePress: html, body { margin: 0; padding: 0; height: 100%; } #app { min-height: 100%; position: relative; } #footer { position: absolute; bottom: 5px; right: 5px; } – Futago-za Ryuu Dec 17 '18 at 22:40
  • 1
    I can't believe all the people who says this answer works. If your content div (#content) is short, sure, but if it can scroll, then the footer is no longer attached. Meanwhile stackoverflow is asking me permission to store a cookie just fine. Obviously there is a better answer and this isn't it. – Michael Labbé Jul 12 '19 at 15:44
  • @MichaelLabbé This was a long time ago but I believe what you have said is exactly the question. This answer gives the the expected behaviour in this case, the fact this answer was accepted also tells us it does what the OP wanted it to do. Unless I have missed something, please feel free to give a demo and we can take a look and see if there is a better way. :) – Ruddy Jul 15 '19 at 14:21
  • @MichaelLabbé This worked fine for me on a minimal site, if it isn't working for you it's likely another CSS rule conflicting with it or a required rule above that you've forgotten to add. – Hashim Aziz Jun 01 '22 at 01:52
18

Try position:fixed; bottom:0;. This will make your div to stay fixed at the bottom.

WORKING DEMO

The HTML:

<div id="bottom-stuff">
  <div id="search"> MY DIV </div>
</div>
<div id="bottom"> MY DIV </div>

The CSS:

#bottom-stuff {

    position: relative;
}

#bottom{

    position: fixed; 
    background:gray; 
    width:100%;
    bottom:0;
}

#search{height:5000px; overflow-y:scroll;}

Hope this helps.

Nitesh
  • 15,425
  • 4
  • 48
  • 60
  • @NathanLee Im not sure that is what the OP wants, I have created a answer to show you what I think he wants. Take a look. Also good job on the fiddle. +1 – Ruddy Dec 04 '13 at 08:56
  • Thx. As he mentioned that he needs to sit under the search result div if the page can be scrolled down. So according to it, I have created the fiddle. @Ruddy – Nitesh Dec 04 '13 at 08:59
  • @NathanLee Im pretty sure this is still wrong. As in not what the OP wants. This is a fixed footer, so it will always be at the bottom of your screen. The OP is saying that they would like the footer to sit at the bottom of the page if its NOT scrollable but if it is scrollable then the footer should move to the bottom of the page under the result. Not the bottom of the screen all the time. I think that made sense, what I just said. – Ruddy Dec 04 '13 at 09:12
  • It is conveying multiple meanings, as making a div sit, also imples, keeping it fixed and not letting it to move and let the above one to scroll. Let the OP specify what is he looking for. - @Ruddy I assume, he has good options to make us understand his perspective. – Nitesh Dec 04 '13 at 09:17
  • 1
    Great but I don't think you got what meant. The DIV should not be a fixed, It should move along with the search result DIV but whenever search result DIV height is low it should just sit at the bottom of the page but if not it should sit under the search result DIV. – Naveen Gamage Dec 04 '13 at 10:49
  • This works great even without setting the height of search div. – Dash Sep 12 '20 at 05:42
9

Simple 2020 no-tricks method:

body {
    display: flex;
    flex-direction: column;
}

#footer {
    margin-top: auto;
}
Benny K
  • 1,107
  • 12
  • 9
  • Works perfectly, it's nice to see an 'up to date' method that works so much better than the hacks of yesteryear! – user2677034 Dec 18 '21 at 18:48
7

It's a quick fix, I hope it helps.

<div id="content">
content...
</div>
<footer>
content footer...
</footer>

css:

#content{min-height: calc(100vh - 100px);}

100vh is 100% height of device and 100px is height of footer

If the content is higher than height of device, the footer will stay on bottom. And the content is shorter than height of device, the footer will stay on bottom of screen

Marco Antonio Aguilar Gomez
  • 71
  • 1
  • 2
4

Finally I found A good css that works!!! Without position: absolute;.

body {
    display:table;
    min-height: 100%;
}
.fixed-bottom {
  display:table-footer-group;
}

I have been looking for this for a long time! Hope this helps.

levkaster
  • 2,670
  • 2
  • 25
  • 32
1

Nathan Lee's answer is perfect. I just wanted to add something about position:absolute;. If you wanted to use position:absolute; like you had in your code, you have to think of it as pushing it away from one side of the page.

For example, if you wanted your div to be somewhere in the bottom, you would have to use position:absolute; top:500px;. That would push your div 500px from the top of the page. Same rule applies for all other directions.

DEMO

JJJ
  • 3,314
  • 4
  • 29
  • 43