CSS實現元素撐滿剩余空間的5種方法

CSS實現元素撐滿剩余空間的5種方法 🎨

在日常開發中，我們經常需要讓某個元素占據容器的剩余空間。這是一個常見的布局需求，比如側邊欄+主內容區、頭部+內容區+底部等布局。本文將介紹5種不同的方法來實現這個需求，并分析各種方法的優缺點。

目錄

  • CSS實現元素撐滿剩余空間的5種方法 🎨
    • 目錄
    • Flexbox 方法
    • Grid 方法
    • 絕對定位方法
    • calc() 方法
    • 最佳實踐建議 💡
    • 總結

Flexbox 方法

📁 詳見 ./01-flexbox/index.html

Flexbox 是最現代和推薦的方式。通過設置 flex-grow: 1，元素會自動擴展占據剩余空間。對于垂直布局，配合 height: 0 使用效果更好。

聊天應用布局：

在這里插入圖片描述

<div class="chat-container"><header class="chat-header"><img src="avatar.jpg" alt="用戶頭像"><h2>聊天室</h2></header><main class="chat-messages"><div class="message received">收到的消息</div><div class="message sent">發送的消息</div></main><footer class="chat-input"><input type="text" placeholder="輸入消息..."><button>發送</button></footer>
</div><style>
.chat-container {display: flex;flex-direction: column;height: 100vh;
}.chat-header {height: 60px;background: #075e54;
}.chat-messages {flex: 1;height: 0; /* 關鍵屬性 */overflow-y: auto;
}.chat-input {height: 60px;background: #f0f0f0;
}
</style>

實現思路解析：

  1. 垂直布局三要素：

    • display: flex + flex-direction: column 創建垂直伸縮布局
    • flex: 1 讓中間區域自動占據剩余空間
    • height: 0 防止內容撐開，確保嚴格遵守 flex 規則

  2. 滾動區域處理：

    • 設置 overflow-y: auto 使內容過多時可滾動
    • 不設置 height: 0 的話，內容會撐開容器，破壞布局

  3. 布局結構：
    容器 (100vh)
    ├── 頭部 (固定60px)
    ├── 內容 (flex: 1 + height: 0)
    └── 底部 (固定60px)

  4. 性能優化：

    • 使用 transform 代替定位提升性能
    • 避免頻繁改變高度觸發重排

其他適用場景：

  1. 后臺管理系統布局

    • 頂部固定導航欄
    • 左側固定菜單欄
    • 右側自適應內容區

  2. 移動端應用布局

    • 固定頂部header
    • 可滾動的內容區域
    • 固定底部導航欄

  3. 文檔編輯器

    • 工具欄
    • 自適應的編輯區域
    • 狀態欄

優點：

  • 靈活且直觀
  • 支持動態內容
  • 響應式表現好
  • 一維布局的最佳選擇

缺點：

  • IE11及以下版本支持不完善
  • 不適合復雜的二維布局

Grid 方法

📁 詳見 ./02-grid/index.html

Grid 布局通過 fr 單位或 auto 來分配剩余空間，特別適合復雜的二維布局。

儀表盤布局：

在這里插入圖片描述

<div class="dashboard"><!-- 狀態卡片 --><div class="widget status-card"><h3>總訪問量</h3><div class="number">1,234,567</div></div><div class="widget status-card"><h3>活躍用戶</h3><div class="number">45,678</div></div><!-- 大尺寸部件 --><div class="widget large-widget"><h3>訪問趨勢圖</h3></div>
</div><style>
.dashboard {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: 100px 200px;gap: 20px;
}.widget {background: white;border-radius: 10px;padding: 20px;
}.large-widget {grid-column: span 2;
}/* 響應式布局 */
@media (max-width: 768px) {.dashboard {grid-template-columns: repeat(2, 1fr);}
}
</style>

實現思路解析：

  1. 網格系統設計：

    • 使用 repeat(4, 1fr) 創建均等的四列布局
    • grid-template-rows 定義不同的行高
    • gap: 20px 統一設置網格間距

  2. 響應式布局策略：
    桌面端：4列
    平板端：2列 (media query)
    手機端：1列

  3. 組件尺寸控制：

    • 使用 grid-column: span 2 讓組件跨越兩列
    • 通過 grid-area 可以實現更復雜的位置控制

  4. 自適應處理：

    • fr 單位自動分配剩余空間
    • 結合 minmax() 設置最小尺寸防止擠壓

適用場景：

  1. 圖片畫廊/瀑布流

    • 自適應的網格布局
    • 不規則的圖片排列
    • 響應式的列數調整

  2. 網站首頁布局

    • 多區塊的內容排列
    • 廣告位的靈活布局
    • 響應式的柵格系統

  3. 在線商城商品展示

    • 商品網格
    • 不同尺寸的促銷位
    • 自適應的分類展示

優點：

  • 二維布局更靈活
  • 代碼簡潔明了
  • 響應式設計更簡單
  • 支持復雜的對齊和間距控制

缺點：

  • 老瀏覽器兼容性問題
  • 對于簡單的一維布局可能顯得過重
  • 學習曲線相對較陡

絕對定位方法

📁 詳見 ./03-absolute/index.html

使用絕對定位和固定值來計算剩余空間，通過設置 top、right、bottom、left 值來精確控制位置。

視頻播放器控制層：

在這里插入圖片描述

<div class="video-container"><video poster="thumbnail.jpg"><source src="video.mp4" type="video/mp4"></video><div class="controls-overlay"><div class="top-controls"><h2>視頻標題</h2><button class="control-button">??</button></div><div class="progress-bar"><div class="progress"></div></div><div class="bottom-controls"><button class="control-button">??</button><div class="time-display">02:30 / 10:00</div><button class="control-button">🔊</button></div></div>
</div><style>
.video-container {position: relative;width: 100%;height: 100vh;
}.controls-overlay {position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: linear-gradient(to bottom,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 80%,rgba(0,0,0,0.7) 100%);
}.bottom-controls {position: absolute;bottom: 0;left: 0;right: 0;height: 60px;padding: 15px;
}
</style>

實現思路解析：

  1. 層級控制：
    視頻容器 (relative)
    ├── 視頻元素
    └── 控制層 (absolute)
    ├── 頂部控件
    ├── 進度條
    └── 底部控件

  2. 漸變遮罩設計：

    • 使用 linear-gradient 創建漸變背景
    • 頂部和底部漸變營造層次感
    • 中間區域透明保持視頻可見

  3. 交互優化：

    • hover 時顯示控制層
    • 使用 transition 實現平滑過渡
    • 控件布局考慮觸控友好性

  4. 響應式考慮：

    • 控件尺寸使用相對單位
    • 移動端適配大小按鈕
    • 保持關鍵控件始終可見

適用場景：

  1. 固定元素覆蓋

    • 全屏遮罩層
    • 模態框背景
    • 全屏加載指示器

  2. 廣告位布局

    • 固定位置的廣告條
    • 懸浮廣告
    • 角標定位

  3. 特殊交互界面

    • 拖拽區域
    • 自定義滾動條
    • 圖片裁剪區域

優點：

  • 瀏覽器兼容性好
  • 性能較好
  • 精確控制位置
  • 層級控制容易

缺點：

  • 不夠靈活
  • 需要手動計算位置
  • 脫離文檔流可能影響其他元素
  • 響應式布局較難維護

calc() 方法

📁 詳見 ./04-calc/index.html

使用 CSS 的 calc() 函數動態計算尺寸，可以混合使用不同單位進行計算。

多欄布局：

在這里插入圖片描述

<div class="article-container"><h2>等寬三欄布局</h2><div class="three-columns"><div class="column">第一欄</div><div class="column">第二欄</div><div class="column">第三欄</div></div><h2>混合寬度布局</h2><div class="mixed-columns"><aside class="sidebar">側邊欄</aside><main class="main-content">主內容區</main></div>
</div><style>
/* 三欄等寬布局 */
.three-columns {display: flex;gap: 30px;
}.three-columns .column {width: calc(100% / 3 - 20px);/* 減去間距的權重 */
}/* 混合寬度布局 */
.mixed-columns {display: flex;gap: 30px;
}.mixed-columns .sidebar {width: 300px;
}.mixed-columns .main-content {width: calc(100% - 330px);/* 減去側邊欄寬度和間距 */
}@media (max-width: 768px) {.three-columns,.mixed-columns {flex-direction: column;}.three-columns .column,.mixed-columns .sidebar,.mixed-columns .main-content {width: 100%;}
}
</style>

實現思路解析：

  1. 寬度計算原理：

    /* 三欄等寬布局 */
width: calc(100% / 3 - 20px)  /* 總寬度均分減去間距 *//* 混合布局 */
width: calc(100% - 330px)     /* 總寬度減去固定寬度和間距 */

  2. 間距處理策略：

    • 使用 gap 屬性設置列間距
    • 在計算時減去對應的間距值
    • 響應式布局時重置間距

  3. 精確計算：

    • 考慮邊框和內邊距的影響
    • 使用 box-sizing: border-box
    • 預留邊距防止小數點誤差

  4. 響應式設計：

    • 斷點處切換為垂直布局
    • 重置為 100% 寬度
    • 保持間距的一致性

適用場景：

  1. 自定義滾動容器

    • 減去固定高度的滾動區域
    • 考慮padding和邊框的精確計算
    • 動態高度的內容區域

  2. 表單布局

    • 標簽和輸入框組合
    • 多列表單布局
    • 自適應的輸入區域

  3. 媒體播放器

    • 進度條計算
    • 控制欄布局
    • 縮略圖網格

優點：

  • 精確控制
  • 支持動態計算
  • 可混合不同單位
  • 適合精確的數學計算

缺點：

  • 需要明確知道其他元素的尺寸
  • IE9及以下不支持
  • 計算規則可能復雜
  • 性能略低于固定值

table 布局方法

📁 詳見 ./05-table/index.html

使用 CSS table 布局屬性來分配空間，特別適合需要等高列或自動空間分配的場景。

數據表格：

在這里插入圖片描述

<div class="table-container"><div class="data-table"><div class="table-header"><div class="table-row"><div class="table-cell">ID</div><div class="table-cell">項目名稱</div><div class="table-cell">進度</div><div class="table-cell">狀態</div></div></div><div class="table-body"><div class="table-row"><div class="table-cell">001</div><div class="table-cell">項目重構</div><div class="table-cell"><div class="progress-bar"><div class="progress" style="width: 75%"></div></div></div><div class="table-cell"><span class="status">進行中</span></div></div></div></div>
</div><style>
.data-table {display: table;width: 100%;border-collapse: collapse;
}.table-header {display: table-header-group;background: #f8f9fa;
}.table-body {display: table-row-group;
}.table-row {display: table-row;
}.table-cell {display: table-cell;padding: 15px;border-bottom: 1px solid #dee2e6;vertical-align: middle;
}/* 列寬設置 */
.table-cell:nth-child(1) { width: 80px; }
.table-cell:nth-child(2) { width: 200px; }
.table-cell:nth-child(3) { width: 200px; }
.table-cell:nth-child(4) { width: 120px; }
</style>

實現思路解析：

  1. 表格結構設計：
    table-container
    └── data-table (display: table)
    ├── table-header (table-header-group)
    │ └── table-row
    │ └── table-cell × N
    └── table-body (table-row-group)
    └── table-row × N
    └── table-cell × N

  2. 列寬控制策略：

    • 固定列使用具體像素值
    • 自適應列不設寬度自動分配
    • 使用 min-width 防止內容擠壓

  3. 樣式優化：

    • 使用 border-collapse 處理邊框
    • 通過 vertical-align 控制對齊
    • nth-child 實現斑馬紋效果

  4. 特點利用：

    • 自動等高列
    • 自動垂直對齊
    • 天然的響應式行為

適用場景：

  1. 數據密集型界面
    • 數據表格
    • 列表展示
    • 價格對比表

最佳實踐建議 💡

  1. 優先使用 Flexbox

    • 對于大多數現代網站，Flexbox 是最佳選擇
    • 代碼簡單，維護方便

  2. 需要考慮兼容性時

    • 如果需要支持舊版瀏覽器，可以考慮 calc() 或絕對定位方案
    • 可以使用 @supports 進行優雅降級

  3. 復雜布局場景

    • 對于復雜的網格布局，優先使用 Grid
    • 可以配合 Flexbox 實現更復雜的布局

總結

每種方法都有其適用場景，選擇合適的方法要考慮：

  • 瀏覽器兼容性要求
  • 布局復雜度
  • 響應式需求
  • 維護成本

建議在實際項目中：

  1. 優先使用 Flexbox/Grid 等現代方案
  2. 需要兼容老瀏覽器時，可以采用 calc()/絕對定位方案
  3. 結合項目實際情況選擇最合適的方案

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/85101.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/85101.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/85101.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

[AI]從零開始的YOLO數據集增強教程

[AI]從零開始的YOLO數據集增強教程

一、前言 不知道大家在訓練YOLO時有沒有遇到過這樣的情況&#xff0c;明明數據集已經準備了很多了&#xff0c;但是YOLO還是不認識某個物品&#xff0c;或者置信度低。那么有沒有辦法讓我們不制作新數據集的情況下讓代碼幫我們生成新的數據集來訓練模型呢&#xff1f;當然有&am…
閱讀更多...
軟件工程的相關名詞解釋

軟件工程的相關名詞解釋

目錄 1. 軟件生命周期2.開源軟件3.軟件工程4.模塊化原則5.信息隱藏原則6.雙向追蹤7.原型8.軟件需求9.需求工程10.邊界類11.軟件實現&#xff08;的任務&#xff09;12.軟件缺陷13.回歸測試14.軟件β版15.軟件部署16.糾正性維護17.改善性維護18.適應性維護19.軟件邏輯老化 1. 軟…
閱讀更多...
2025.06.17【BUG】|多樣品VCF文件合并技巧及注意事項（以bcftools為例）

2025.06.17【BUG】|多樣品VCF文件合并技巧及注意事項（以bcftools為例）

文章目錄 [toc]一、合并VCF的常用命令1.1 合并多個bgzip壓縮的VCF文件1.2 使用文件列表合并 二、合并前的準備與注意事項2.1 文件格式要求2.2 樣本名唯一性2.3 檢查文件模式匹配 三、常見報錯與解決方法3.1 報錯&#xff1a;Error: Duplicate sample names (sample1), use --fo…
閱讀更多...
包含30個APP客戶端UI界面的psd適用于旅游酒店項目

包含30個APP客戶端UI界面的psd適用于旅游酒店項目

包含30個APP客戶端UI界面的psd適用于旅游酒店項目 此資源包含30個完全可編輯的psd界面組成。內容包括歡迎頁、登錄、注冊、首頁、搜索、側邊菜單、用戶中心、個人介紹、用戶空間、產品詳細信息、酒店預定、天氣情況等各種常用界面&#xff0c;您可以將其用于旅游酒店類的APP應用…
閱讀更多...
ArrayList源碼分析

ArrayList源碼分析

目錄 ArrayList簡介 ArrayList和vector的區別&#xff08;了解即可&#xff09; ArrayList添加null值 ArrayList和LinkedList區別 ArrayList核心源碼解讀 ArrayList擴容機制分析 一步一分析ArrayList擴容機制 hugeCapacity()方法 System.arraycopy() Arrays.copyOf()方法 …
閱讀更多...
NX二次開發C#---通過Face找Edges，再通過Edges找Curve

NX二次開發C#---通過Face找Edges，再通過Edges找Curve

文章介紹了一個名為AskFaceEdge的靜態方法&#xff0c;用于處理3D建模中的邊緣曲線生成。該方法通過NX Open API調用&#xff0c;主要功能是獲取指定面的邊緣并生成相應的曲線。方法接收兩個參數&#xff1a;faceTag&#xff08;面標簽&#xff09;和curveLoop&#xff08;曲線…
閱讀更多...
設計模式筆記_創建型_工廠模式

設計模式筆記_創建型_工廠模式

1. 工廠模式簡介 工廠模式是一種創建型設計模式&#xff0c;主要用于創建對象實例。 它通過定義一個接口或抽象類來創建對象&#xff0c;而不是直接實例化具體類&#xff0c;從而將對象的創建過程與使用過程分離。 工廠模式通常分為兩種類型&#xff1a; 簡單工廠模式&#x…
閱讀更多...
2025.6.16總結

2025.6.16總結

工作&#xff1a;今天閉環了個遺留問題。在做專項評估時寫得太簡單&#xff0c;這讓測試經理質疑你的測試質量。如果換位思考&#xff0c;你是測試經理&#xff0c;你該怎么去把握風險和保證產品的質量&#xff0c;就知道寫得太簡單&#xff0c;沒有可信度。 找開發看了下后臺…
閱讀更多...
記錄：安裝VMware、Ubuntu、ROS2

記錄：安裝VMware、Ubuntu、ROS2

安裝了VMware&#xff0c;就能夠在Windows系統裝安裝Ubuntu&#xff0c;使用Linux系統。安裝了Ubuntu&#xff0c;就能在里面安裝ROS2&#xff0c;之后寫代碼控制機器人兒。 安裝VMware 我安裝的是16 pro【具體是vmware16.2.4】&#xff0c;下載網站&#xff1a;VMware Works…
閱讀更多...
將后端數據轉換為docx文件

將后端數據轉換為docx文件

使用docx npm install docx 按照注釋處理數據并轉換為對應的bolb數據流 <template><Button type"primary" click"handleDocxCreate">{{buttonTitle || "報告生成"}}</Button> </template><script> import {Doc…
閱讀更多...
數據結構排序算法合集

數據結構排序算法合集

快排 private static void quickSort(int[] ret) { quick(ret,0,ret.length-1); } private static void quick(int[] ret, int left, int right) { if(left>right) 記一下這里是大于等于 return; int pivot partition(ret,left,right); quick(ret…
閱讀更多...
【算法筆記】紅黑樹插入操作

【算法筆記】紅黑樹插入操作

紅黑樹插入與調整詳解 一、紅黑樹的五大性質 紅黑樹是一種自平衡的二叉搜索樹&#xff08;BST&#xff09;&#xff0c;其核心特性如下&#xff1a; 顏色屬性&#xff1a;每個節點非紅即黑根屬性&#xff1a;根節點必須為黑色葉子屬性&#xff1a;所有的 NIL 葉子節點都是黑…
閱讀更多...
認知計算革命：從算法創新到產業落地的AI專業核心應用全景

認知計算革命：從算法創新到產業落地的AI專業核心應用全景

??一、自動化機器學習&#xff08;AutoML&#xff09;?? ??技術機理與產業實踐深度剖析?? ??神經網絡架構搜索&#xff08;NAS&#xff09;?? 強化學習方案&#xff1a;Google Brain的NASNet采用策略梯度優化卷積單元進化算法方案&#xff1a;DeepMind的AmeobaNe…
閱讀更多...
篇章十 論壇系統——業務開發——板塊和帖子

篇章十 論壇系統——業務開發——板塊和帖子

目錄 1.板塊 1.1 思路 1.2 實現邏輯 1.3 參數要求 1.4 實現步驟 1.Mapper.xml 2.Mapper.java 3.Service接口 4.Service實現 5.單元測試 6.Controller 7.測試API 8.前后端交互 2.帖子 1.1思路?編輯 1.2 參數要求 ?編輯 1.3 實現步驟 1.Mapper.xml 2.Mapper…
閱讀更多...
React Native 上線前的準備與企業實戰經驗總結

React Native 上線前的準備與企業實戰經驗總結

上線前的準備與企業實戰經驗總結 關鍵要點 熱更新簡化部署&#xff1a;CodePush 和 Expo OTA 允許快速推送 JavaScript 和資源更新&#xff0c;繞過應用商店審核&#xff0c;適合修復 Bug 或小規模功能迭代。監控與分析提升質量&#xff1a;Sentry 提供實時錯誤跟蹤&#xff…
閱讀更多...
【AI時代速通QT】第一節：C++ Qt 簡介與環境安裝

【AI時代速通QT】第一節：C++ Qt 簡介與環境安裝

目錄 前言 一、為什么是 Qt&#xff1f;—— C 開發者的必備技能 二、Qt 的核心魅力&#xff1a;不止于跨平臺 2.1 優雅之一&#xff1a;代碼隔離&#xff0c;清晰明了 2.2 優雅之二&#xff1a;信號與槽&#xff08;Signal & Slot&#xff09;機制 2.3 優雅之三&…
閱讀更多...
pandas學習筆記

pandas學習筆記

前言 總結才是知識&#xff0c;作者習慣不好&#xff0c;不會總結&#xff0c;導致函數一旦不使用就會忘記怎么使用&#xff0c;特此寫了本文&#xff0c;用于給自己一個復習的資料. 提示&#xff1a;如果你是小白&#xff0c;每個代碼請自己敲打。 一 pandas的介紹 Pandas is…
閱讀更多...
算法題（力扣每日一題）—改變一個整數能得到的最大差值

算法題（力扣每日一題）—改變一個整數能得到的最大差值

給你一個整數 num 。你可以對它進行以下步驟共計 兩次&#xff1a; 選擇一個數字 x (0 < x < 9). 選擇另一個數字 y (0 < y < 9) 。 數字 y 可以等于 x 。 將 num中所有出現 x 的數位都用 y 替換。 令兩次對 num 的操作得到的結果分別為 a 和 b 。 請你返回 a 和 b…
閱讀更多...
Kubernetes筆記

Kubernetes筆記

1.簡介 Kubernetes的本質是一組服務器集群&#xff0c;它可以在集群的每個節點上運行特定的程序&#xff0c;來對節點中的容器進行管理。目的是實現資源管理的自動化&#xff0c;主要提供了如下的主要功能&#xff1a; 自我修復&#xff1a;一旦某一個容器崩潰&#xff0c;能夠…
閱讀更多...
Flutter——數據庫Drift開發詳細教程(八)

Flutter——數據庫Drift開發詳細教程(八)

目錄 自定義 SQL 類型定義類型使用自定義類型在 Dart 中在 SQL 中 方言意識支持的 SQLite 擴展json1fts5地緣壟斷 自定義 SQL 類型 Drift 的核心庫主要以 SQLite3 為目標平臺編寫。這體現在Drift 開箱即用的SQL 類型上——這些類型由 SQLite3 支持&#xff0c;并新增了一些由 …
閱讀更多...
最新文章

Copyright @ 2022~2023