国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/緊貼底部的頁腳

緊貼底部的頁腳

greatwhole 發布于2019-08-29 12:45 / 2151人閱讀

摘要：這樣就可以了我們只需要四行簡單的代碼，就完美實現了緊貼底部的頁腳。后記上面是我總結的四種方法，如果還有什么更好的方法，歡迎共同探討參考資料總在底部的頁腳揭秘

前言

在寫前端頁面時，經常會遇到這種情況：有一個具有塊級樣式的頁腳，當頁面內容足夠長時它一切正常；有的時候，由于頁面長度不夠，頁面底部的頁腳會很尷尬的跑上來；頁腳不能像我們期望中那樣“緊貼”在視口的最底部，而是緊跟在內容的下方。

那么怎樣做到內容多時頁腳在內容下方，內容少時頁腳“緊貼”在視口底部？我總結了四種方法。

正文

首先我先寫一個簡單的頁面結構，如下：

再頁面加點公共樣式：

*{
    padding:0;
    margin: 0;
}
header{
    line-height: 80px;
}
header,footer{
    background-color: #ccc;
    text-align: center;
}
main{
    text-align: center;
    font-size: 30px;
}

接下來我們用四種不同的方法來實現如何讓頁腳緊貼底部。

方法一

/* footer的每一級父元素都為100%高 */
html,body {
    height: 100%;
    width: 100%;
}
/* 這里將頁面內容最小高度設為100%；撐滿屏幕，
然后使用margin-bottom負值把頁腳吸上來，
最后設置底部內邊距用來填充內容過多時被遮擋的頁腳。 */
.wrapper{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    margin-bottom: -80px;
    padding-bottom: 80px;
    box-sizing: border-box;
}
footer{
    height: 80px;
}

方法二

方法二和方法一比較類似，只是用偽元素取代了內邊距。代碼如下：

html,body {
    height: 100%;
    width: 100%;
}
.wrapper{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    margin-bottom: -80px;
}
/* 這里用偽元素取代了方法一中.wrapper的內邊距 */
.wrapper::after{
    content: "";
    display: block;
    height: 80px;
}
footer{
    height: 80px;
}

方法三

方法三借助視口相關的長度單位以及calc()函數。這兩個東西都只能兼容到IE9。

.wrapper{
    min-height:calc(100vh - 80px);
}
footer{
    height: 80px;
}

前三種方法都有一定的局限性，都要給頁腳設置固定的高度，不夠靈活。有沒有更加靈活的方法呢？
當然有，那就是我們方法四了。

方法四

方法四用到了CSS3中的布局神器Flexbox。

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.wrapper {
    flex: 1; 
}

這樣就可以了！我們只需要四行簡單的代碼，就完美實現了緊貼底部的頁腳。Flexbox是不是相當霸氣？
Flexbox兼容性不是很好（萬惡的IE），但在移動端還是不錯的。可以放心使用。

后記

上面是我總結的四種方法，如果還有什么更好的方法，歡迎共同探討！

參考資料：
CSS 總在底部的頁腳
CSS揭秘

云服務器 GPU云服務器頁腳網頁頁腳固定頁腳頁頭頁腳

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112123.html

css的結構與布局

摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當視口寬度小于高度時，等于，否則等于。基于的方法這種應該算是最佳的解決辦法實現方法當使用布局時，使用在水平和垂直方向都會居中。 1.自適應內部元素在css中，不給元素一個height值時，元素會自適應其內部的元素高度，有時我們想讓元素的寬度也達到此效果，應用場景如下。如下當前的這種布局，想要改成最外層的div的寬度由當前的圖片撐開的...

GeekQiaQia 2019-08-29 12:25 評論0 收藏0
css揭秘筆記——結構與布局

摘要：回退方案根據兄弟元素的數量來設置樣式知識點偽類選擇器只有一個列表項等效于一個正好有四個列表項的列表中的第一個列表項它之后的所有兄弟元素因此，有且只有四個列表項的情況就可以表示為如果列表項不是四個，則沒有被選中。自適應內部元素我們希望 width 可以像 height 一樣，可以自動適應內容的寬度。假如有如下結構： Lorem ipsum dolor ... L...

張憲坤 2019-08-29 13:50 評論0 收藏0
CSS結構與布局

摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了， title: 結構與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應 CSS3 新增寬度屬性值 width:mi...

figofuture 2019-08-30 13:13 評論0 收藏0
CSS結構與布局

摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了， title: 結構與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應 CSS3 新增寬度屬性值 width:mi...

BearyChat 2019-08-22 10:49 評論0 收藏0
CSS結構與布局

摘要：當列表中至少包含四項時，命中包括該項之后的所有列表項當然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個布局的影響也太過強烈。如此，對于響應布局也可以不用擔心了，雖然有點點，但也算完美的解決了， title: 結構與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應 CSS3 新增寬度屬性值 width:mi...

renweihub 2019-08-01 16:04 評論0 收藏0