css中底部sticky footer

時間 2019-12-13

標籤 css 底部 sticky footer 欄目 CSS 简体版

原文原文鏈接

Sticky footers設計是最古老和最多見的效果之一，它能夠歸納以下：css

1 若是頁面內容不夠長的時候，頁腳塊粘貼在視窗底部；
2 若是內容足夠長時，頁腳塊會被內容向下推送。

出現問題如圖：

html

方法一：經典固定高度套路
·html內容：瀏覽器

<body>
    <div class="wrapper">
        <div class="content">這裏是content</div>
    </div>　
　　<div class="footer"></div>
</body>

爲內容區域添加外層包裹的wrapper,設置css樣式
·css內容：app

html, body, .wrapper {
 height: 100%;
}
body > .wrapper {
     height: auto;
     min-height: 100%;
}
.content {
     /* 必須使用和footer相同的高度 爲底部留白 */
    padding-bottom: 150px;
}  
.footer {
    position: relative;
    /* footer高度的負值 */
    margin-top: -150px; 
    height: 150px;
    clear:both;
}
重要的是須要設置min-height:100%,內容區域padding-bottom: 150px;尾部margin-top: -150px; 
這個方法兼容性很好，實測 IE7 也能正常展現，爲了更好的兼容性，能夠爲wrapper添加清除浮動
    .clearfix{
         display: inline-block;
    }
    .clearfix:after {
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
    }

方法二:Flexbox佈局
html:佈局

<div class="content">
  <p>內容區域</p>
</div>
<div class="footer">
  <p>頁腳塊</p>
</div>

css:flex

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}
body .content {
  flex: 1;
}

這個方法精簡，固然缺點也是顯而易見的，只有 IE10 及以上的瀏覽器才支持 flex 佈局
方法三：內容區域計算最小的高度spa

這種方法經過vh(viewpoint height)來計算總體視窗的高度(1vh等於視窗高度的1%),而後減去底部footer的高度，從而求得內容區域的最小高度。

html:設計

<body>
　　<div class="content">
　　    <p>全部內容區</p>
　　</div>
　　<div class="footer"></div>
</body>

css:code

.content{
 min-height:calc(100vh - 7em);
 box-sizing:border-box;
} 
.footer{
    height:7em;
    width:100%;
}

ok,好，方法一也比較推薦，以上就是我的對sticky Footer的理解(❤ ω ❤)htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。