logo标签列表

将CSS锚点DIV定位到页面底部

htmlcsslayout
3
我可能很快就会撞墙了，我简直不敢相信这么愚蠢的事情竟然彻底打败了我...因此我求助于你，Stack Overflow...请指点和启迪。
问题：将div放在页面底部，宽度为100％，位于任何包装器之外。 建议解决方案：http://ryanfait.com/sticky-footer/ 带内容实现：http://www.weleasewodewick.com/redesign/index_content.html 无内容实现：http://www.weleasewodewick.com/redesign/index.html 有内容 - >好的，运行良好 没有内容 = 不好，页脚正好位于视口下面的页脚高度。
我真的很感激您对此的意见，它完全困扰了我一个小时。我完全预料到会受到某种形式的嘲笑 :)
澄清：如果没有足够的内容填充页面，则页脚应附加到视口底部。如果有足够的内容，则应向下移动超出视口底部。
谢谢！ Foxed
3个回答
5
3
我爱你。永远永远。 - suitedupgeek
3
抱歉，如果我没有正确理解问题，您是在谈论将页脚放置在页面底部吗？
请尝试以下方法：
#footer {
   width: 100%;
   height: 150px;  
   position: fixed; 
   bottom: 0px; 
   left: 0px; 
}

如果您希望页脚保持在一个位置，请将position属性更改为absolute。
啊，抱歉 - 我应该表达得更清楚，我需要页脚保持文档的流动性 - 如果有内容，我不希望它固定在页面底部。如果页面上有足够的内容将页脚推到视口底部之外，那么 index_content.html 就是它应该工作的方式。 - suitedupgeek
0

这可能会帮助下一个使用Next.js实现接受的答案（来自fortysevenmedia.com）的人。

您需要进行更改。

html, body {
    height: 100%;
}

到

html, body, #__next {
    height: 100%;
}

(#__next 是 Next 放在 <body> 内部的容器 div，因此它包裹了建议中的容器 div 和页脚 div - 除非您给它高度，否则答案将无法正常工作)。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接