資訊專欄INFORMATION COLUMN
摘要：目標實現頁面頁腳效果，即頁腳部分在頁面內容較少沒有占滿全部屏幕的時候可以處于頁面最底部，當頁面內容較多的時候則處于正常布局位置。此時我們可以添加事件，使得頁腳元素能夠在瀏覽器尺寸發生變化時一直處于正確的位置。
1. 思路目標：實現頁面頁腳效果，即頁腳部分在頁面內容較少（沒有占滿全部屏幕）的時候可以處于頁面最底部，當頁面內容較多的時候則處于正常布局位置。
var $footer = $("#footer");
我們計算上一元素的底端位置，并將該值與頁腳元素的高度相加，如果這一加和值大于瀏覽器高度，那么該頁腳元素可以處于正常布局位置（如右側圖示）；反之則需要對頁腳附加一個 margin-top 以將其放置在頁面底端（如左側圖示）。
var $prev = $footer.prev();
// 方法一：用上一元素的頂部坐標加上其高度
var prevBottomPosition = $prev.offset().top + $prev.outerHeight(true);
// 方法二：用頁腳元素的頂部坐標減去原有 margin-top 值
var prevBottomPosition = $footer.offset().top - parseInt($footer.css("margin-top"));
// 頁腳高度
var footerHeight = $footer.outerHeight();
// 獲取不作調整時的 footer 底端坐標
var predictBottomPosition = prevBottomPosition + footerHeight;
// 計算瀏覽器高度值
var windowHeight = $(window).height();
if(predictBottomPosition < windowHeight){
var offset = windowHeight - prevBottomPosition - footerHeight;
$footer.css("margin-top", offset + "px");
}
2. 注意
當運行這些代碼的時候，會出現頁腳元素從原始位置閃到處理后位置的情況，這時我們可以給頁腳元素添加樣式 visibility:hidden，并在之前的 js 代碼后加上 $footer.css("visibility", "visible") 即可；
實際使用中可能會出現瀏覽器縮放的問題，這時原本調整好位置的頁腳可能會因為頁面高度變化而不能顯示在正確位置。此時我們可以添加 resize() 事件，使得頁腳元素能夠在瀏覽器尺寸發生變化時一直處于正確的位置。
3. 總結我們將以上思路整合，并以 $.fn 的方式給 jQuery 實例加一個擴展，之后就能以 $("#your-footer-id").footer() 的方式使用這一腳本了。
HTML：
footer.js：
(function($){
$.fn.footer = function(){
var $footer = $(this);
$footer.css("visibility", "hidden");
$footer.css("margin-bottom", 0); // footer 元素不應具有下外邊距
// 獲取相鄰元素
var $prev = $footer.prev();
// 相鄰元素的底端坐標( 考慮 margin 值 )
// var prevBottomPosition = $prev.offset().top + $prev.outerHeight(true);
// console.log(prevBottomPosition);
// footer上一相鄰元素的頂端坐標( 考慮 margin 值 ), 上一種計算方法也可以
var prevBottomPosition = $footer.offset().top - parseInt($footer.css("margin-top"));
// 計算 footer 的高度值, 這里不考慮外邊距, 只考慮內邊距和邊框
var footerHeight = $footer.outerHeight();
// 獲取不作調整時的 footer 底端坐標
var predictBottomPosition = prevBottomPosition + footerHeight;
// 計算瀏覽器高度值
var windowHeight = $(window).height();
if(predictBottomPosition < windowHeight){
var offset = windowHeight - prevBottomPosition - footerHeight;
$footer.css("margin-top", offset + "px");
}
$footer.css("visibility", "visible");
}
})(jQuery);
效果：
footer.js - Github
JavaScript、jQuery 獲取瀏覽器和屏幕各種高度寬度
理解 jquery的 $.extend()，$.fn 和 $.fn.extend()
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80493.html
摘要：這樣就可以了我們只需要四行簡單的代碼，就完美實現了緊貼底部的頁腳。后記上面是我總結的四種方法，如果還有什么更好的方法，歡迎共同探討參考資料總在底部的頁腳揭秘 前言 在寫前端頁面時，經常會遇到這種情況：有一個具有塊級樣式的頁腳，當頁面內容足夠長時它一切正常；有的時候，由于頁面長度不夠，頁面底部的頁腳會很尷尬的跑上來；頁腳不能像我們期望中那樣緊貼在視口的最底部，而是緊跟在內容的下方。 那么...
摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當視口寬度小于高度時，等于，否則等于?；诘姆椒ㄟ@種應該算是最佳的解決辦法實現方法當使用布局時，使用在水平和垂直方向都會居中。 1.自適應內部元素 在css中，不給元素一個height值時，元素會自適應其內部的元素高度，有時我們想讓元素的寬度也達到此效果，應用場景如下。 如下當前的這種布局，想要改成最外層的div的寬度由當前的圖片撐開的...
摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了， title: 結構與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應 CSS3 新增寬度屬性值 width:mi...
閱讀 3705·2021-11-22 13:52
閱讀 3602·2019-12-27 12:20
閱讀 2385·2019-08-30 15:55
閱讀 2144·2019-08-30 15:44
閱讀 2262·2019-08-30 13:16
閱讀 574·2019-08-28 18:19
閱讀 1881·2019-08-26 11:58
閱讀 3436·2019-08-26 11:47
