国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢(xún) 在線咨詢(xún)
15158846557 或 在線咨詢(xún)
所在位置： 首頁(yè) > 營(yíng)銷(xiāo)資訊 > 網(wǎng)站運(yùn)營(yíng) > 【不一樣的CSS】實(shí)現(xiàn)全屏布局的 3 種方式

【不一樣的CSS】實(shí)現(xiàn)全屏布局的 3 種方式

時(shí)間：2023-09-26 18:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-26 18:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

【不一樣的CSS】實(shí)現(xiàn)全屏布局的 3 種方式：

【不一樣的CSS】實(shí)現(xiàn)全屏布局的 3 種方式

若彼岸繁華落盡，誰(shuí)陪我看落日流年

寫(xiě)在前面

對(duì) CSS 布局掌握程度決定你在 Web 開(kāi)發(fā)中的開(kāi)發(fā)頁(yè)面速度。隨著 Web 技術(shù)的不斷革新，實(shí)現(xiàn)各種布局的方式已經(jīng)多得數(shù)不勝數(shù)了。

最近利用碎片時(shí)間，大概用了半個(gè)月的時(shí)間整理了一個(gè)系列，本系列文章總結(jié)了 CSS 中的各種布局，以及實(shí)現(xiàn)方式及其常用技巧。讓你通過(guò)該系列文章對(duì) CSS 布局有一個(gè)新的認(rèn)識(shí)。

該系列的導(dǎo)航帖

里面可以快速跳轉(zhuǎn)到你想了解的文章(建議收藏)

全屏布局概述

全部布局主要應(yīng)用在后臺(tái)，主要效果如下所示：




實(shí)現(xiàn)全屏布局的 3 種方式

在開(kāi)始今天的文章之前，我們先把今天的主要代碼放到下面：

公共的 CSS 樣式如下：

body { margin: 0;}body,html,.container { height: 100vh; box-sizing: border-box; text-align: center; overflow: hidden;}.content { background-color: #52c41a; /* * 中間部門(mén)的布局可以參考 兩列 三列 布局 */ display: grid; grid-template-columns: auto 1fr;}.left { width: 240px; background-color: #52c41a; font-size: 80px; line-height: calc(100vh - 200px);}.right { background-color: #f759ab; font-size: 60px;}.header { height: 100px; background-color: #70a1ff;}.footer { height: 100px; background-color: #ff7a45;}.header,.footer { line-height: 100px; font-size: 52px;}HTML 結(jié)構(gòu)如下：

<div class="container"> <div class="header">header</div> <div class="content"> <div class="left">導(dǎo)航</div> <div class="right"> <div class="right-in">自適應(yīng)，超出高度出現(xiàn)滾動(dòng)條</div> </div> </div> <div class="footer">footer</div></div>關(guān)于中間的三列布局可以參考

使用calc函數(shù)實(shí)現(xiàn)

實(shí)現(xiàn)步驟如下：

  1. 通過(guò) calc 函數(shù)計(jì)算出中間容器的高度。
  2. 中間出現(xiàn)滾動(dòng)條的容器設(shè)置 overflow: auto 即出現(xiàn)滾動(dòng)條的時(shí)候出現(xiàn)滾動(dòng)條。
實(shí)現(xiàn)代碼如下：

.content { overflow: hidden; /* 通過(guò) calc 計(jì)算容器的高度 */ height: calc(100vh - 200px);}.left { height: 100%;}.right { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto; height: 100%;}.right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;}

使用 flex 方案

使用 Flex 方式實(shí)現(xiàn)該布局比較簡(jiǎn)單，示例代碼如下所示：

.container { /* 開(kāi)啟flex布局 */ display: flex; /* 將子元素布局方向修改為垂直排列 */ flex-flow: column;}.content { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto; /* 設(shè)置 中間 部分自適應(yīng) */ flex: 1;}.right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;}
關(guān)于 Flex 布局的詳細(xì)用法請(qǐng)參考

使用 grid 方案

grid 布局對(duì)于這種布局來(lái)說(shuō)，實(shí)現(xiàn)起來(lái)是非常得心應(yīng)手的，通過(guò) template 屬性即可實(shí)現(xiàn)，示例代碼如下：

.container { /* 開(kāi)啟grid布局 */ display: grid; grid-template-rows: auto 1fr auto;}.content { /* 如果超出出現(xiàn)滾動(dòng)條 */ overflow: auto;}.right-in { /* 假設(shè)容器內(nèi)有500px的元素 */ height: 500px;}
關(guān)于 Grid 布局的詳細(xì)用法請(qǐng)參考

總結(jié)



關(guān)鍵詞：布局,方式,實(shí)現(xiàn)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉