如何将页脚（div）alignment到页面的底部？
任何人都可以解释如何alignment页脚底部的页面。 从我见过的例子中，他们都展示了如何让div保持可见，无论你在哪里滚动页面。 虽然我不想那样。 我希望它固定在页面的底部，所以它不会移动。 感谢帮助！
UPDATE
我原来的答案是很久以前的，链接被打破了; 更新它，使其继续有用。
我包括内联更新的解决scheme，以及JSFiddle上的工作示例。 注：我依靠CSS重置，但我不包括这些样式内联。 请参阅normalize.css
解决scheme1 – 保证金抵消
https://jsfiddle.net/UnsungHero97/ur20fndv/2/
HTML
<div id="wrapper"> <div id="content"> <h1>Hello, World!</h1> </div> </div> <footer id="footer"> <div id="footer-content">Sticky Footer</div> </footer> CSS
html, body { margin: 0px; padding: 0px; min-height: 100%; height: 100%; } #wrapper { background-color: #e3f2fd; min-height: 100%; height: auto !important; margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */ } #wrapper:after { content: ""; display: block; height: 50px; /* the footer's total height */ } #content { height: 100%; } #footer { height: 50px; /* the footer's total height */ } #footer-content { background-color: #f3e5f5; border: 1px solid #ab47bc; height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */ padding: 8px; }
解决scheme2 – flexbox
https://jsfiddle.net/UnsungHero97/oqom5e5m/3/
HTML
<div id="content"> <h1>Hello, World!</h1> </div> <footer id="footer">Sticky Footer</footer>
CSS
html { height: 100%; } body { display: flex; flex-direction: column; min-height: 100%; } #content { background-color: #e3f2fd; flex: 1; padding: 20px; } #footer { background-color: #f3e5f5; padding: 20px; }
这里有一些更详细的解释和不同的方法的链接：
- https://css-tricks.com/couple-takes-sticky-footer/
- https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
- http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
原来的答案
你是这个意思吗？
http://ryanfait.com/sticky-footer/
此方法只使用15行CSS，几乎不使用任何HTML标记。 更好的是，它是完全有效的CSS，并且适用于所有主stream浏览器。 Internet Explorer 5及更高版本，Firefox，Safari，Opera等等。
此页脚将永久保留在页面的底部。 这意味着，如果内容大于浏览器窗口的高度，则需要向下滚动以查看页脚…但是如果内容小于浏览器窗口的高度，则页脚将粘到底部的浏览器窗口，而不是浮动在页面中间。
这是另一个更好的解决scheme：
http://www.cssstickyfooter.com/
让我知道你是否需要帮助执行。 我希望这有帮助。
这将使div固定在页面的底部，但如果页面很长，只有在向下滚动时才能看到。
<style type="text/css"> #footer { position : absolute; bottom : 0; height : 40px; margin-top : 40px; } </style> <div id="footer">I am footer</div>
高度和边距应该是相同的，这样页脚才不会显示内容。
你的标题和评论意味着你不是在寻找一个粘滞的页脚（当内容在它下面滚动时，粘在窗口的底部）。 我假设你正在寻找一个页脚，如果内容没有填满窗口，它将被强制到窗口的底部，如果内容超出了窗口边界，那么就下推到内容的底部。
你可以用下面的方法来完成这个。
<style> html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding-bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } </style> <div id="container"> <div id="header">header</div> <div id="body">body</div> <div id="footer">footer</div> </div>
来源： 如何保留页脚底部的页脚
检查了这一点，工作在Firefox和IE浏览器
<style> html, body { height: 100%; } .content { min-height: 100%; } .footer { position: relative; clear: both; } </style> <body> <div class="content">Page content </div> <div class="footer">this is my footer </div> </body>
使用<div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div> 。 页脚不会往上走
一个简单的解决scheme，我使用，从IE8 +的作品
在html上给min-height：100％，这样如果内容less了，那么页面仍然是完整的view-port height和footer sticks在页面底部。 当内容增加时，页脚随着内容向下移动并坚持下来。
JS小提琴工作演示： http : //jsfiddle.net/3L3h64qo/2/
CSS
html{ position:relative; min-height: 100%; } /*Normalize html and body elements,this style is just good to have*/ html,body{ margin:0; padding:0; } .pageContentWrapper{ margin-bottom:100px;/* Height of footer*/ } .footer{ position: absolute; bottom: 0; left: 0; right: 0; height:100px; background:#ccc; }
HTML
<html> <body> <div class="pageContentWrapper"> <!-- All the page content goes here--> </div> <div class="footer"> </div> </body> </html>
我是新手，这些方法不适合我。 但是，我尝试了CSS的边缘属性，并简单地添加了内容像素的值+5。
例如：我的内容布局的高度为1000px，所以我在页脚css中放置了一个1005px的页边距值，这个页面给了我一个5px的边框和一个坐在我的网站底部的页脚。
可能是一个业余的做法，但有效的！
