如何將頁尾 (div) 與頁面底部對齊？

問題描述

任何人都可以解釋如何將頁尾 div 與頁面底部對齊。從我看到的例子中，他們都顯示如何使 div 保持在底部可見，無論您在哪裡滾動頁面。雖然我不想這樣。我希望它固定在頁面的底部，所以它不動。欣賞幫助！

最佳解決方案

UPDATE

我原來的答案是很久以前的，連結斷了，更新它，使其繼續有用。

我正在列出更新的解決方案，以及 JSFiddle 的一個工作示例。注意：我依賴於 CSS 重置，儘管我沒有內聯這些樣式。參考 normalize.css

解決方案 1 – 邊距偏移

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

解決方案 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;
}

這裡有一些連結，更詳細的解釋和不同的方法：

原始答案

你是這個意思嗎？

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.

此頁尾將永久保留在頁面的底部。這意味著如果內容超過瀏覽器視窗的高度，則需要向下滾動以檢視頁尾… 但如果內容小於瀏覽器視窗的高度，則頁尾將貼上到底部的瀏覽器視窗，而不是浮動在頁面的中間。

這是另一個也許更好的解決方案：

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>

高度和 margin-top 應該是一樣的，以便頁尾不顯示內容。

第三種解決方案

您的標題和評論意味著您不是在尋找粘性頁尾 (卡在視窗的底部，因為內容在其下滾動) 。我假設你正在尋找一個頁尾，如果內容沒有填滿視窗，那麼這個頁尾會被強制到視窗的底部，如果內容超過視窗邊界，則下拉到底部。

你可以用以下方式來完成這個。

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

資料來源：How to keep footers at the bottom of the page

第四種方案

檢查這個，工作在 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> 。頁尾不會向上

參考文獻

How to align footer (div) to the bottom of the page? [duplicate]

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何將頁尾 (div) 與頁面底部對齊？