css anchor div to foot of page
I may bounce my head off the wall shortly, I can't believe that something as stupid as this has utterly defeated me ... therefore I turn to you, Stack Overflow ... for guidance and enlightenment.
Problem: Sit div at foot of page, 100% width, outside of any sort of wrapper.
Proposed Solution: http://ryanfait.com/sticky-foot开发者_开发技巧er/Implementation with content: http://www.weleasewodewick.com/redesign/index_content.html Implementation with no content: http://www.weleasewodewick.com/redesign/index.html
with content -> Good, works nicely
no content = bad, footer sits exactly height of footer below the viewport.I really would appreciate your input into this, it's completely vexed me for the past hour. I wholly expect some form of ridicule :)
Clarification: Footer should be attached to bottom of the viewport if there is not enough content to fill the page. It should move down beyond the bottom of the viewport if there is sufficient amount of content.
Thanks!
FoxedI think this is probably what you are looking for:
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
Sorry if I didn't interpret the question correctly, but are you talking about placing the footer on the bottom of the page?
Try this:
#footer {
width: 100%;
height: 150px;
position: fixed;
bottom: 0px;
left: 0px;
}
If you want the footer to stay in one place, change the position attribute to absolute.
This may help the next person implementing the accepted answer (from fortysevenmedia.com) while using Next.js.
You will want to change
html, body {
height: 100%;
}
to
html, body, #__next {
height: 100%;
}
(#__next is the container div that Next puts just inside <body>, which therefore wraps both the container div and footer div that the accepted answer recommends - unless you give it height, the answer won't work).
加载中,请稍侯......
精彩评论