溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細介紹“html如何實現粘性頁腳”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“html如何實現粘性頁腳”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。
網上方法
1、html標簽
將html顯示高度占滿（class=“h-100”）。
<html lang="en" class="h-100">
2、body標簽
設置body彈性布局，并將高度占滿（class=“d-flex flex-column h-100”）。
<body class="d-flex flex-column h-100">
3、main標簽
將main設置為不同的屏幕設備不設置收縮（role=“main” class=“flex-shrink-0”）。
<main role="main" class="flex-shrink-0">
彈性收縮規則：
flex-shrink-0 不同的屏幕設備不設置收縮
flex-shrink-1 不同的屏幕設備設置收縮
4、footer標簽
設置footer頂部邊框高度自動設置（class=“mt-auto”）。
<footer class="footer mt-auto py-3">
但我試了一下在我這都不能實現預期的效果。
解決方法
可通過判斷$（window）和$（document）的關系來為footer添加"fixed-bottom"class
$（window）。height（）代表了當前可見區域的大小，
$（document）。height（）則代表了整個文檔的高度，可視具體情況使用。
可根據它們兩個之間的關系來決定是否添加改class。
頁腳如下所示：
<footer class="mt-auto py-3 bg-dark" id="footer">
<div class="container">
<p class="m-0 text-center text-muted">Copyright © Blog 2021</p>
</div>
</footer>
動態添加"fixed-bottom"class
if（$（window）。height（） == $（document）。height（））{
$（"#footer"）。addClass（"fixed-bottom"）;
}else{
$（"#footer"）。removeClass（"fixed-bottom"）;
}
注意：如果 $（window）。height（） 獲取的不是窗口的高度而是文檔文本高度，
也就是（ w i n d o w ） . h e i g h t （ ） 和 （window）。height（）和（window）。height（）和（document）。height返回值一樣
那就是因為DOCTYPE沒寫造成的。
請檢查html標簽，改成，就OK了。
為此專門查了一下的作用：
DOCTYPE是document type（文檔類型）的簡寫，在web設計中用來說明你用的XHTML或者HTML是什么版本。其中的DTD叫文檔類型定義，里面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，并展現出來。特別是沒有聲明或聲明不正確將在標準瀏覽器下更是不能正常顯示。
要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。
網頁中用了 <!DOCTYPE html＞ 就表示該頁面采用了W3C標準，這樣做可以增強頁面的兼容性，降低對瀏覽器的依賴性。
不加這一行，就表示頁面采用瀏覽器本身的解析標準，這樣會造成頁面在不同的瀏覽器（IE、火狐等）可能出現不同的顯示效果。
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
感謝您能讀到這里，小編希望您對“html如何實現粘性頁腳”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
