內容較少時，頁面的footer始終顯示在底部，不是使用fixed。_html/css_WEB-ITnose

來源：懂視網責編：小采時間：2020-11-27 16:33:38

內容較少時，頁面的footer始終顯示在底部，不是使用fixed。_html/css_WEB-ITnose

內容較少時，頁面的footer始終顯示在底部，不是使用fixed。_html/css_WEB-ITnose:一、使用css，參考國外的一個解決方法： http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS Sticky Footer on your website Add the following lines of CSS to your

推薦度：

點擊下載本文 文檔為doc格式

導讀內容較少時，頁面的footer始終顯示在底部，不是使用fixed。_html/css_WEB-ITnose:一、使用css，參考國外的一個解決方法： http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS Sticky Footer on your website Add the following lines of CSS to your

一、使用css，參考國外的一個解決方法：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

How to use the CSS Sticky Footer on your website

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

* {

margin: 0;

}

html, body {

height: 100%;

}

.wrapper {

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 auto -4em;

}

.footer, .push {

height: 4em;

}

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

Your website content here.

二、使用js，參考這個：（本人未驗證過，看代碼應該可行）

http://jingyan.baidu.com/article/2fb0ba4054805900f2ec5f9d.html

 //footer吸底效果 var _ch = $("#content").height();//這個就是你中間內容div的高度 var _wh = $(window).height();//整個窗口的高度 //console.log("window's height",_wh,"content's height",_ch,"_wh - _ch:",_wh - _ch); if(_wh - _ch > 192){ $("#content").css("min-height",(_wh-192)+"px"); } //希望這段代碼對你有用！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com