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
<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;
}
The answer is
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.
This demo has the height of content height: 100px; so you can see what it would look like with no scrolling.
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.
Try position:fixed; bottom:0;. This will make your div to stay fixed at the bottom.
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.
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
Simple 2020 no-tricks method:
body {
display: flex;
flex-direction: column;
}
#footer {
margin-top: auto;
}
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.
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.
Source: Stackoverflow.com