資訊專欄INFORMATION COLUMN
摘要：原文鏈接經(jīng)典的上中下布局。左邊是定寬，右邊是上中下布局。還是上中下布局，區(qū)別是固定在頂部，不會(huì)隨著頁面滾動(dòng)。左側(cè)固定在左側(cè)且與視窗同高，當(dāng)內(nèi)容超出視窗高度時(shí)，在內(nèi)部出現(xiàn)滾動(dòng)條。左右兩側(cè)滾動(dòng)條互相獨(dú)立。
原文鏈接
Sticky Footer經(jīng)典的上-中-下布局。
當(dāng)頁面內(nèi)容高度小于可視區(qū)域高度時(shí)，footer 吸附在底部；當(dāng)頁面內(nèi)容高度大于可視區(qū)域高度時(shí)，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 固定在頂部，不會(huì)隨著頁面滾動(dòng)。
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è)且與視窗同高，當(dāng)內(nèi)容超出視窗高度時(shí)，在 sidebar 內(nèi)部出現(xiàn)滾動(dòng)條。左右兩側(cè)滾動(dòng)條互相獨(dú)立。
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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112821.html
摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個(gè)基本概念定位浮動(dòng)外邊距操縱我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來進(jìn)行的。具體實(shí)現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動(dòng)布局來實(shí)現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、外邊距操縱 我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來進(jìn)行的。所以我們先來看看什么是正常的文檔流。 正常文...
摘要：常用布局在小程序中的應(yīng)用所有布局的根本都是個(gè)基本概念定位浮動(dòng)外邊距操縱我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來進(jìn)行的。具體實(shí)現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動(dòng)布局來實(shí)現(xiàn)。 CSS 常用布局在小程序中的應(yīng)用 所有css布局的根本都是3個(gè)基本概念：定位、浮動(dòng)、外邊距操縱 我們其他的布局實(shí)現(xiàn)方式，都是基于正常的文檔流來進(jìn)行的。所以我們先來看看什么是正常的文檔流。 正常文...
摘要：高度模型淺識(shí)為的簡(jiǎn)寫，簡(jiǎn)稱為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...
摘要：屬性定義了多根軸線的對(duì)齊方式。負(fù)值對(duì)該屬性無效。屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋屬性。默認(rèn)值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。 本文主要記錄一些自己遇見的flex布局案例 簡(jiǎn)單回顧一下flex常用屬性 6個(gè)常用的容器屬性 flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。 f...
閱讀 2073·2021-09-22 15:43
閱讀 8747·2021-09-22 15:07
閱讀 1088·2021-09-03 10:28
閱讀 2063·2021-08-19 10:57
閱讀 1077·2020-01-08 12:18
閱讀 2982·2019-08-29 15:09
閱讀 1534·2019-08-29 14:05
閱讀 1647·2019-08-29 13:57
