html粘性頁腳的具體使用
我要評論本學(xué)期在軟件設(shè)計大作業(yè)時要實現(xiàn)一個粘性頁腳功能，即不管頁面內(nèi)容怎么變，頁腳始終要滑到頁面的最下方才能出現(xiàn)。
本次作業(yè)采用bootstrap框架
網(wǎng)上方法
1、html標(biāo)簽
將html顯示高度占滿（class=“h-100”）。
<html lang="en" class="h-100">
2、body標(biāo)簽
設(shè)置body彈性布局，并將高度占滿（class=“d-flex flex-column h-100”）。
<body class="d-flex flex-column h-100">
3、main標(biāo)簽
將main設(shè)置為不同的屏幕設(shè)備不設(shè)置收縮（role=“main” class=“flex-shrink-0”）。
<main role="main" class="flex-shrink-0">
彈性收縮規(guī)則：
- flex-shrink-0 不同的屏幕設(shè)備不設(shè)置收縮
- flex-shrink-1 不同的屏幕設(shè)備設(shè)置收縮
4、footer標(biāo)簽
設(shè)置footer頂部邊框高度自動設(shè)置（class=“mt-auto”）。
<footer class="footer mt-auto py-3">
但我試了一下在我這都不能實現(xiàn)預(yù)期的效果。
解決方法
可通過判斷$(window)和$(document)的關(guān)系來為footer添加"fixed-bottom"class
$(window).height()代表了當(dāng)前可見區(qū)域的大小，
$(document).height()則代表了整個文檔的高度，可視具體情況使用.
可根據(jù)它們兩個之間的關(guān)系來決定是否添加改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>
動態(tài)添加"fixed-bottom"class
if($(window).height() == $(document).height()){
$("#footer").addClass("fixed-bottom");
}else{
$("#footer").removeClass("fixed-bottom");
}
注意：如果 $(window).height() 獲取的不是窗口的高度而是文檔文本高度，也就是 (window).height()和(document).height返回值一樣。那就是因為DOCTYPE沒寫造成的。
請檢查html標(biāo)簽，改成，就OK了。
為此專門查了一下的作用：
DOCTYPE是document type(文檔類型)的簡寫，在web設(shè)計中用來說明你用的XHTML或者HTML是什么版本。其中的DTD叫文檔類型定義，里面包含了文檔的規(guī)則，瀏覽器就根據(jù)你定義的DTD來解釋你頁面的標(biāo)識，并展現(xiàn)出來。特別是沒有聲明或聲明不正確將在標(biāo)準(zhǔn)瀏覽器下更是不能正常顯示。
要建立符合標(biāo)準(zhǔn)的網(wǎng)頁，DOCTYPE聲明是必不可少的關(guān)鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標(biāo)識和CSS都不會生效。
網(wǎng)頁中用了 <!DOCTYPE html＞ 就表示該頁面采用了W3C標(biāo)準(zhǔn)，這樣做可以增強頁面的兼容性，降低對瀏覽器的依賴性。
不加這一行，就表示頁面采用瀏覽器本身的解析標(biāo)準(zhǔn)，這樣會造成頁面在不同的瀏覽器（IE、火狐等）可能出現(xiàn)不同的顯示效果。
也許這個解釋能說明一定的原因。 定義DOCTYPE是個好習(xí)慣，也希望大家能寫出標(biāo)準(zhǔn)規(guī)范的代碼！
到此這篇關(guān)于html粘性頁腳的具體使用的文章就介紹到這了,更多相關(guān)html粘性頁腳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML頁面滾動時部分內(nèi)容位置固定不滾動的實現(xiàn)
這篇文章主要介紹了HTML 頁面滾動時部分內(nèi)容位置固定不滾動的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著2021-04-14