如何将页脚(div)与页面底部对齐? [英] How to align footer (div) to the bottom of the page?

问题描述

谁能解释一下如何将页脚 div 与页面底部对齐.从我看到的例子来看，它们都展示了如何让 div 在底部保持可见，无论你滚动页面的位置.虽然我不想那样.我希望它固定在页面底部，所以它不会移动.感谢您的帮助！

解决方案

UPDATE

我原来的回答是很久以前的了，链接失效了；更新它以使其继续有用.

我包含了更新的内联解决方案，以及一个关于 JSFiddle 的工作示例.注意:我依赖于 CSS 重置，但我没有将这些样式包含在内.参考 normalize.css

解决方案 1 - 保证金抵消

https://jsfiddle.net/UnsungHero97/ur20fndv/2/

HTML

<div id="内容"><h1>你好，世界！</h1>

<页脚 id="页脚"><div id="footer-content">粘性页脚</div></页脚>

CSS

html, body {边距:0px；填充:0px；最小高度:100%；高度:100%；}#包装{背景颜色:#e3f2fd；最小高度:100%；高度:自动！重要；底边距:-50px；/* 下边距为页脚总高度的负值 */}#wrapper:在{之后内容: "";显示:块；高度:50px；/*页脚的总高度*/}#内容 {高度:100%；}#页脚{高度:50px；/*页脚的总高度*/}#footer-content {背景颜色:#f3e5f5；边框:1px 实心 #ab47bc;高度:32px；/* 高度 + 顶部/底部填充 + 顶部/底部边框必须加起来为页脚高度 */填充:8px；}

解决方案 2 - flexbox

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

HTML

<h1>你好，世界！</h1>
<footer id="footer">粘性页脚</footer>

CSS

html {高度:100%；}身体 {显示:弹性；弹性方向:列；最小高度:100%；}#内容 {背景颜色:#e3f2fd；弹性:1；填充:20px；}#页脚{背景颜色:#f3e5f5；填充:20px；}

这里有一些链接，其中包含更详细的解释和不同的方法:

• https://css-tricks.com/couple-takes-sticky-footer/
• https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
• http://matthewjamestaylor.com/blog/保持页脚在页面底部

<小时>

原答案

这是你的意思吗?

http://ryanfait.com/sticky-footer/

<块引用>

此方法仅使用 15 行 CSS，几乎没有任何 HTML 标记.更好的是，它是完全有效的 CSS，并且适用于所有主要浏览器.Internet Explorer 5 及更高版本、Firefox、Safari、Opera 等.

此页脚将永久保留在页面底部.这意味着如果内容大于浏览器窗口的高度，您将需要向下滚动才能看到页脚...但如果内容小于浏览器窗口的高度，页脚将粘在底部浏览器窗口，而不是在页面中间浮动.

如果您在实施方面需要帮助，请告诉我.我希望这会有所帮助.

Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. Although I don't want it like that. I want it fixed at the bottom of the page, so it doesn't move. Appreciate the help!

解决方案

UPDATE

My original answer is from a long time ago, and the links are broken; updating it so that it continues to be useful.

I'm including updated solutions inline, as well as a working examples on JSFiddle. Note: I'm relying on a CSS reset, though I'm not including those styles inline. Refer to normalize.css

Solution 1 - margin offset

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

Solution 2 - 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;
}

Here's some links with more detailed explanations and different approaches:

• 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

---

ORIGINAL ANSWER

Is this what you mean?

http://ryanfait.com/sticky-footer/

This method uses only 15 lines of CSS and hardly any HTML markup. Even better, it's completely valid CSS, and it works in all major browsers. Internet Explorer 5 and up, Firefox, Safari, Opera and more.

This footer will stay at the bottom of the page permanently. This means that if the content is more than the height of the browser window, you will need to scroll down to see the footer... but if the content is less than the height of the browser window, the footer will stick to the bottom of the browser window instead of floating up in the middle of the page.

Let me know if you need help with the implementation. I hope this helps.

这篇关于如何将页脚(div)与页面底部对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！