一、sticky footers解釋
在網頁設計中，sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經歷過。它可以概括如下：如果頁面內容不夠長的時候，頁尾塊貼上在視窗底部；如果內容足夠長時，頁尾塊會被內容向下推送。(效果如下圖)
二、實現
2.1 容器使用負的margin bottom
首先是個包裹除了footer之外其他元素的容器，然後容器內有個佔位元素，以及使用負的margin bottom,他們的絕對值相等。
<body
>
<
div
class
>
content
<
div
class
="push"
>
div>
div>
<
footer
class
="footer"
>
footer
>
body
>
html, body .footer, .push2.2 底部使用負的margin bottom既然想到在容器上使用負的margin bottom，同理可得負的margin top版本
<body
>
<
div
class
="content"
>
<
div
class
="content-inside"
>
content
div>
div>
<
footer
class
="footer"
>
footer
>
body
html, body .content .content-inside .footer2.3 calc版本結合vh單位，calc 版本就粗暴很多。
<body
>
<
div
class
="content"
>
content
div>
<
footer
class
="footer"
>
footer
>
body
>
.content .footercalc中的 70px，和50px是假定了content中最後乙個元素有個20px的margin bottom，你不必在意這些~
2.4 flexbox版本
flexbox版本同樣很簡單，並且相比前面三種方式，它不需要知道footer的高度，避免了magic number的尷尬。
<body
>
<
div
class
="content"
>
content
div>
<
footer
class
="footer"
>
footer
>
body
>
html body .content原理是flex: 1使得content的高度可以自由伸縮。
grid比flexbox還要新很多，使用grid同樣很簡潔，遺憾的是現在chrome canary 或者 firefox developer edition才能看到效果。
<body
>
<
div
class
="content"
>
content
div>
<
footer
class
="footer"
>
footer
>
body
>
html body .footer文章**：
React Native flex 布局使用總結
父檢視屬性 容器屬性 flexdirection 對子布局方向的設定 row 從左到右依次排列 row reverse 從右向左依次排列 column default 從上到下排列 column reverse 從下到上排列 複製 flexwrap 定義子布局是否在父布局中多行排列 wrap 允許多...
DIV CSS網頁布局相容性的要點與訣竅總結
div css網頁布局相容性的要點與訣竅總結.ie vs ff css 相容要點 doctype 影響 css 處理 ff div 設定 margin left,margin right 為 auto 時已經居中,ie 不行 ff body 設定 text align 時,div 需要設定 marg...
DIV CSS網頁布局相容性的要點與訣竅總
ie vs ff css 相容要點 doctype 影響 css 處理 ff div 設定 margin left,margin right 為 auto 時已經居中,ie 不行 ff body 設定 text align 時,div 需要設定 margin auto 主要是 margin left...