Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Place footer always at the bottom

Tags:

html

css

position

I have following page layout:

<header></header>
<div id="content"></div>
<aside></aside>
<footer>
 <ul>
  <li></li>
 </ul>
</footer>

Now I want to place the footer exactly in the left corner:

text-align: left;
position: fixed;
bottom: 0;
margin: -16px -8px;

Now is the negative margin not the best solution. Are there better ways to positionate a footer directly in the corner?

Regards

like image 315
bodokaiser Avatar asked Apr 25 '12 13:04

bodokaiser


People also ask

How do you make things stay at the bottom in CSS?

If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.

How do I stick footer to the bottom when page content is less?

Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.


2 Answers

write like this:

text-align: left;
position: fixed;
bottom: 0;
left:0
like image 174
sandeep Avatar answered Sep 28 '22 16:09

sandeep


Check this site Sticky Footer

Example:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}
like image 43
Obsivus Avatar answered Sep 28 '22 16:09

Obsivus