html粘性頁腳的具體使用
我要評論本學期在軟件設計大作業(yè)時要實現一個粘性頁腳功能，即不管頁面內容怎么變，頁腳始終要滑到頁面的最下方才能出現。
本次作業(yè)采用bootstrap框架
網上方法
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">
彈性收縮規(guī)則：
- 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()代表了當前可見區(qū)域的大小，
$(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>
動態(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標簽，改成，就OK了。
為此專門查了一下的作用：
DOCTYPE是document type(文檔類型)的簡寫，在web設計中用來說明你用的XHTML或者HTML是什么版本。其中的DTD叫文檔類型定義，里面包含了文檔的規(guī)則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，并展現出來。特別是沒有聲明或聲明不正確將在標準瀏覽器下更是不能正常顯示。
要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。
網頁中用了 <!DOCTYPE html＞ 就表示該頁面采用了W3C標準，這樣做可以增強頁面的兼容性，降低對瀏覽器的依賴性。
不加這一行，就表示頁面采用瀏覽器本身的解析標準，這樣會造成頁面在不同的瀏覽器（IE、火狐等）可能出現不同的顯示效果。
也許這個解釋能說明一定的原因。 定義DOCTYPE是個好習慣，也希望大家能寫出標準規(guī)范的代碼！
到此這篇關于html粘性頁腳的具體使用的文章就介紹到這了,更多相關html粘性頁腳內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了HTML 頁面滾動時部分內容位置固定不滾動的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2021-04-14