溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“CSS如何實現內容高度不夠的時候底部(footer)自動貼底”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“CSS如何實現內容高度不夠的時候底部(footer)自動貼底”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。
在 UI 切圖過程中，頁面往往由三個部分組成，頭部、內容和底部。當頁面的內容高度不夠撐滿屏幕，底部（footer）就跟著內容浮動上來了，小屏幕由于高度有限看不出來異常，但如果是大屏的話，底部下面變會多出很多空白，非常影響美觀。
方案 1：Flex-Box
頭部使用 position: sticky; 吸頂，再使用盒子（ main ）來包住內容（ container > content ）和底部（ footer ），這個盒子設置最小高度為除頭部外的剩余屏幕高度： min-height: calc(100vh - 50px); ，盒子里面使用彈性布局（ flex: 1 1 auto; ）讓內容區域自動撐開，而底部保持不變（ flex: 0 0 auto; ），這樣就有了 內容不夠時底部自動吸底，內容足夠時底部自動下移 的效果。
示例：
<html>
<head>
<title>CSS 實現底部（footer）貼底 - 方案 1：Flex-Box</title>
<style>
body {
margin: 0;
}
header {
height: 50px;
background: #20c997;
position: sticky;
top: 0;
}
main {
display: flex;
flex-flow: column nowrap;
min-height: calc(100vh - 50px);
}
.container {
flex: 1 1 auto;
}
.content {
background: #0d6efd;
}
footer {
flex: 0 0 auto;
background: #fd7e14;
}
</style>
</head>
<body>
<!--頭部-->
<header>
header
</header>
<main>
<div class="container">
<!--內容-->
<div class="content">
content
</div>
</div>
<!--底部-->
<footer>
footer
</footer>
</main>
</body>
</html>在線演示： https://codepen.io/mazeyqian/pen/rNeymdG
優點：底部高度可自由撐開。
缺點：低版本瀏覽器有兼容性（Flex-Box & Calc）問題。
方案 2：底部負距離 margin
內容區設置最小高度鋪滿頁面，然后底部設置等高的負距離 margin 。
示例：
<html>
<head>
<title>CSS 實現底部（footer）貼底 - 方案 2：底部負距離 `margin`</title>
<style>
body {
margin: 0;
}
header {
height: 50px;
background: #20c997;
position: sticky;
top: 0;
}
.container {
min-height: calc(100vh - 50px);
}
.content {
background: #0d6efd;
}
footer {
height: 50px;
margin-top: -50px;
background: #fd7e14;
}
</style>
</head>
<body>
<!--頭部-->
<header>
header
</header>
<div class="container">
<!--內容-->
<div class="content">
content
</div>
</div>
<!--底部-->
<footer>
footer
</footer>
</body>
</html>感謝你的閱讀，希望你對“CSS如何實現內容高度不夠的時候底部(footer)自動貼底”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
