溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下網(wǎng)站footer沉底效果的三種解決方案，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
問題背景
很多網(wǎng)站設(shè)計一般是兩個部分，content + footer，content里面裝的是網(wǎng)站主體內(nèi)容，footer里面展示網(wǎng)站的注冊信息等等，因為網(wǎng)站內(nèi)容高度不定的原因，會出現(xiàn)下面兩種情況：
1.內(nèi)容較少時，這個footer固定在在頁面的底部。如下所示：
2.內(nèi)容較長時，footer跟在內(nèi)容后面滑動，大致表現(xiàn)如下圖紅色框起來的部分:
這個需求在PC端還是很常見的，我在自己的應(yīng)用中也遇到了這個問題，今天總結(jié)了一下實現(xiàn)這種布局的幾個方法。
方法1 使用js計算
為什么第一個就采用js控制的呢，因為實不相瞞，當初我第一次遇到這個問題的時候，直接就使用js去解決的（主要是我知道js肯定能實現(xiàn)的，所以也就沒有花時間去想別的方法）
主要思路是：在頁面加載完成后計算屏幕高度 - content內(nèi)容真實的高度的值，如果差值大于
footer的高度，就給footer的style加上fixed定位，使它固定在屏幕底部。
demo代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>footer沉底效果</title>
<style type="text/css">
div {
margin: 0,
padding: 0;
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
}
#content {
background: blue;
}
#footer {
width: 100%;
height: 100px;
background: red;
}
.footer-fixed {
position: fixed;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="content"> content </div>
<div id="footer">
footer
</div>
</div>
<script type="text/javascript">
let height = document.getElementById('container').clientHeight - document.getElementById('content').clientHeight;
// 這里給footer加上另外的class,使其固定
if (height > 100) document.getElementById('footer').classList.add('footer-fixed');
</script>
</body>
</html>本著能使用css解決就絕對不使用js的原則，這個方法雖然最容易想到，但是還是不推薦使用，而且，這段css代碼要獲取clientHeight，將會導(dǎo)致頁面頁面重排和重繪，性能考慮上來說，也不推薦。
方法2 采用flex布局 + min-height
flex布局中的justify-content: space-between;搭配超級好用的min-height，剛好可以滿足在content內(nèi)容不足的時候，footer的沉底效果
demo代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>footer沉底效果</title>
<style type="text/css">
div {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
// 重點代碼
// 雖然不知道container的高度，但是可以設(shè)置一個最小高度，這樣有利于布局
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#content {
background: blue;
}
#footer {
width: 100%;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>min-height實在是超級好用的一個css屬性了，搭配flex輕松實現(xiàn)沉底效果。
方法3 巧用flex + margin-top
這個技巧是在講margin auto的妙用中學(xué)到的，在flex格式化上下文中，margin auto會自動去分配剩余空間。這里面我們可以在footer上使用margin-top:auto來達到沉底效果。
<!DOCTYPE html>
<html>
<head>
<title>footer沉底效果</title>
<style type="text/css">
div {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
background: blue;
}
#footer {
width: 100%;
height: 100px;
background: red;
margin-top: auto; // 重點代碼
}
</style>
</head>
<body>
<div id="container">
<div id="content">
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>以上是“網(wǎng)站footer沉底效果的三種解決方案”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼