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
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.
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.
write like this:
text-align: left;
position: fixed;
bottom: 0;
left:0
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With