資訊專欄INFORMATION COLUMN
摘要：原文鏈接經(jīng)典的上中下布局。左邊是定寬，右邊是上中下布局。還是上中下布局，區(qū)別是固定在頂部，不會隨著頁面滾動。左側(cè)固定在左側(cè)且與視窗同高，當內(nèi)容超出視窗高度時，在內(nèi)部出現(xiàn)滾動條。左右兩側(cè)滾動條互相獨立。
原文鏈接
Sticky Footer經(jīng)典的上-中-下布局。
當頁面內(nèi)容高度小于可視區(qū)域高度時，footer 吸附在底部；當頁面內(nèi)容高度大于可視區(qū)域高度時，footer 被撐開排在 content 下方
demo link
HEADER CONTENT
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
article {
flex: auto;
}
Fixed-Width Sidebar
在上-中-下布局的基礎(chǔ)上，加了左側(cè)定寬 sidebar。
demo link
HEADER CONTENT
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: auto;
display: flex;
}
.content article {
flex: auto;
}
Sidebar
左邊是定寬 sidebar，右邊是上-中-下布局。
demo link
HEADER CONTENT
body {
min-height: 100vh;
display: flex;
}
aside {
flex: none;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
}
.content article {
flex: auto;
}
Sticky Header
還是上-中-下布局，區(qū)別是 header 固定在頂部，不會隨著頁面滾動。
demo link
HEADER CONTENT
body {
min-height: 100vh;
display: flex;
flex-direction: column;
padding-top: 60px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
}
article {
flex: auto;
height: 1000px;
}
Sticky Sidebar
左側(cè) sidebar 固定在左側(cè)且與視窗同高，當內(nèi)容超出視窗高度時，在 sidebar 內(nèi)部出現(xiàn)滾動條。左右兩側(cè)滾動條互相獨立。
demo link
HEADER CONTENT
body {
height: 100vh;
display: flex;
}
aside {
flex: none;
width: 200px;
overflow-y: auto;
display: block;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content article {
flex: auto;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112821.html
摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。具體實現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動布局來實現(xiàn)。 CSS 常用布局在小程序中的應用 所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱 我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。 正常文...
摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。具體實現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動布局來實現(xiàn)。 CSS 常用布局在小程序中的應用 所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱 我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。 正常文...
摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...
摘要：屬性定義了多根軸線的對齊方式。負值對該屬性無效。屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。 本文主要記錄一些自己遇見的flex布局案例 簡單回顧一下flex常用屬性 6個常用的容器屬性 flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。 f...
閱讀 2212·2021-09-22 15:43
閱讀 9156·2021-09-22 15:07
閱讀 1204·2021-09-03 10:28
閱讀 2147·2021-08-19 10:57
閱讀 1243·2020-01-08 12:18
閱讀 3113·2019-08-29 15:09
閱讀 1645·2019-08-29 14:05
閱讀 1729·2019-08-29 13:57
