Align DIV to bottom of the page

Question

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     but it should be placed like this    and whenever there are more rows and the page can be scrolled down  the DIV should be place like this      My currrent code looks like this           lt div id  bottom-stuff gt                lt div id  bottom  gt                                  DIV stuff              lt  div gt            lt  div gt     bottom-stuff       padding  0px 30px 30px 30px      margin-left 150px      position  relative      bottom       position  absolute  bottom  0px

User · Answer

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

User · Answer

Right I think I know what you mean so lets see      HTML    lt div id  con  gt      lt div id  content  gt Results will go here lt  div gt      lt div id  footer  gt Footer will always be at the bottom lt  div gt   lt  div gt    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

User · Answer

It s a quick fix  I hope it helps    lt div id  content  gt  content     lt  div gt   lt footer gt  content footer     lt  footer gt    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

User · Answer

Simple 2020 no-tricks method  body       display  flex      flex-direction  column      footer       margin-top  auto

User · Answer

Try position fixed  bottom 0   This will make your div to stay fixed at the bottom    WORKING DEMO  The HTML    lt div id  bottom-stuff  gt     lt div id  search  gt  MY DIV  lt  div gt   lt  div gt   lt div id  bottom  gt  MY DIV  lt  div gt    The CSS    bottom-stuff        position  relative      bottom       position  fixed       background gray       width 100       bottom 0      search height 5000px  overflow-y scroll     Hope this helps

User · Answer

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

[html] Align DIV to bottom of the page

Examples related to html

Examples related to css