css anchor div to foot of page_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-04 09:00 出处：网络

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.

相关专题：css layout

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!

Foxed

I 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%;
}

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).