CSS 固定在頁面底部，是一種常見的頁面布局需求。通常，我們希望頁面的底部始終顯示某些元素，例如版權信息、聯系方式等。下面，我們就來介紹如何使用 CSS 實現固定在頁面底部的布局。
/* html部分 */ <!DOCTYPE html> <html> <head> <title>CSS固定在頁面底部</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <p>這是頁面內容區域</p> </div> <footer>這是固定在頁面底部的元素</footer> </body> </html>
在 HTML 中，我們使用了 <div class="content"> 定義了頁面的內容區域，使用了 <footer> 定義了要固定在頁面底部的元素。
接下來，我們在 CSS 中實現固定在頁面底部的布局：
/* css部分 */
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
margin-bottom: -50px; /* footer高度 */
}
.footer {
height: 50px;
line-height: 50px;
text-align: center;
background-color: #f5f5f5;
position: relative;
bottom: 0;
width: 100%;
}首先，我們需要讓 HTML 和 body 元素的高度為 100%，以便讓內容區域占據除 footer 之外的全部高度。
然后，我們給內容區域指定 min-height：使用 min-height 而不是 height 的目的是因為內容區域可能會很長，超出視口高度，使用 min-height 可以確保內容區域至少占據整個視口高度。
下一步，我們使用 margin-bottom 設置一個負的底部邊距來平衡 footer 的高度（假設 footer 高度為 50px）。
最后，我們使用 position: relative 和 bottom: 0 將 footer 固定在頁面底部，并指定其寬度為 100%。為使 footer 居中，我們也設置了 text-align: center 和 line-height: 50px（與 footer 高度一致）。
通過上述 CSS 代碼，我們成功實現了固定在頁面底部的布局。
上一篇css 圖例
下一篇css3循環平鋪圖片