資訊專欄INFORMATION COLUMN
摘要：使用布局達到了預期的效果，及時內容區較少，頁腳區塊也是固定在底部。二布局方式代碼這種方法就是利用布局對視窗高度進行分割。
什么是Sticky footer布局？
前端開發中大部分網站，都會把一個頁面分為頭部區塊、內容區塊、頁腳區塊，這也是比較。往往底部都要求能固定在屏幕的底部，而非隨著文檔流排布。要實現的樣式可以概括如下：如果頁面內容不夠長的時候，頁腳區塊在屏幕的底部；如果內容足夠長的時候，頁腳區塊會被內容向下推送。可以以下圖展示Sticky footer實現的效果：
在正常的文檔流中，頁面內容較少的時候，如果不做處理，頁腳部分不是固定在視窗底部的。
使用sticky footer布局達到了預期的效果，及時內容區較少，頁腳區塊也是固定在底部。
實現方式
首先構建簡單的布局代碼：
其中content為內容區。方法介紹。
一、為內容區域添加最小高度
這種方法重要用vh(viewpoint height)來計算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內容區域的最小高度。例如我們可以添加如下樣式：
.content {
min-height: calc(100vh-footer的高度)
}
此方法需要知道footer的高度，如果高度不確定此方法不推薦。content的高度也可以用百分比來表示。
二、flex布局方式
html代碼：
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer{
flex: 0;
}
這種方法就是利用flex布局對視窗高度進行分割。footer的flex設為0，這樣footer獲得其固有的高度;content的flex設為1，這樣它會充滿除去footer的其他部分。
二、負margin布局方式實現
基本構架：
html代碼
// 這里是頁面內容
css代碼：
.wrapper {
min-height: 100%;
}
.wrapper .content{
padding-bottom: 50px; /* footer區塊的高度 */
}
.footer {
position: relative;
margin-top: -50px; /* 使footer區塊正好處于content的padding-bottom位置 */
height: 50px;
clear: both;
}
.clearfix::after {
display: block;
content: ".";
height: 0;
clear: both;
visibility: hidden;
}
需要注意的：content元素的padding-bottom與footer元素的高度以及footer元素的margin-top值必須要保持一致。
這種負margin的布局方式，是兼容性最佳的布局方案，各大瀏覽器均可完美兼容，適合各種場景，但使用這種方式的前提是必須要知道footer元素的高度，且結構相對較復雜。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52451.html
摘要：原文鏈接經典的上中下布局。左邊是定寬，右邊是上中下布局。還是上中下布局，區別是固定在頂部，不會隨著頁面滾動。左側固定在左側且與視窗同高，當內容超出視窗高度時，在內部出現滾動條。左右兩側滾動條互相獨立。 原文鏈接 Sticky Footer 經典的上-中-下布局。 當頁面內容高度小于可視區域高度時，footer 吸附在底部；當頁面內容高度大于可視區域高度時，footer 被撐開排在 co...
摘要：寫在最前是的一種布局場景。頁腳永遠固定在頁面的底部，頁面內容不夠長的時候頁腳黏在視窗底部，內容足夠長時會被向下移動。老式門戶網站由于內容過短常常版權頁腳前移，移動端特定布局也需要來解決這些問題。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 寫在最前：Sticky Footer是css的一種布局場景。頁腳foot...
摘要：寫在最前是的一種布局場景。頁腳永遠固定在頁面的底部，頁面內容不夠長的時候頁腳黏在視窗底部，內容足夠長時會被向下移動。老式門戶網站由于內容過短常常版權頁腳前移，移動端特定布局也需要來解決這些問題。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 寫在最前：Sticky Footer是css的一種布局場景。頁腳foot...
摘要：設計是最古老和最常見的效果之一，它可以概括如下如果頁面內容不夠長的時候，頁腳塊粘貼在視窗底部如果內容足夠長時，頁腳塊會被內容向下推送。所有內容區好，方法一也比較推薦，以上就是個人對的理解 Sticky footers設計是最古老和最常見的效果之一，它可以概括如下： 1 如果頁面內容不夠長的時候，頁腳塊粘貼在視窗底部； 2 如果內容足夠長時，頁腳塊會被內容向下推送。 出現問題如圖：sho...
閱讀 3684·2021-08-10 09:42
閱讀 584·2019-08-30 15:55
閱讀 880·2019-08-30 15:54
閱讀 3104·2019-08-30 13:45
閱讀 549·2019-08-29 16:23
閱讀 1986·2019-08-29 16:23
閱讀 976·2019-08-29 15:18
閱讀 2255·2019-08-29 12:57
