管理系統 html 頁面框架（頭、側邊欄+主體、腳）
阿新 • • 發佈：2021-10-04
預覽：(水平方向設定最小寬度)
<body> <div id="app"> <div id="header">頭部</div> <div id="main"> <div id="side">側邊欄</div> <div id="cont">主體區域</div> </div> <div id="foot">xxx © 2021 版權所有</div> </div> </body>
中間區域
- 側邊欄
side寬度設定為 200px - 主體區域
cont寬度設定為100% - 200px，使用calc()進行寬度計算
注意：
- 盒子最小寬度。
26行。視窗小於 min-width 時出現水平滾動條 - 消除字型大小造成的“間隔”。
16行定義全域性字型大小為 0，使用字型的時候需要指定大小，在23行、33行、49行指定字型大小
沉舟側畔千帆過，病樹前頭萬木春。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { padding: 0; margin: 0; box-sizing: border-box; /* 相鄰元素“間隔”清零 */ font-size: 0px; } #header { height: 60px; line-height: 60px; background: #f4f4f4; text-align: center; font-size: 16px; } #app { min-width: 1000px; } #main div { /* 子元素展示型別 */ display: inline-block; /* 子元素高度固定 */ height: 300px; font-size: 16px; } #side { width: 200px; background: #ccc; /* 側邊欄高度：視窗高度 - 頭部高度 */ } #cont{ background: pink; width: calc(100% - 200px); /* 右邊 container 的寬度：視窗長度 - 左邊側邊欄寬度 */ } #foot { height: 40px; line-height: 40px; text-align: center; font-size: 16px; background: #bbb; } </style> <body> <div id="app"> <div id="header">頭部</div> <div id="main"> <div id="side">側邊欄</div> <div id="cont">主題區域</div> </div> <div id="foot">xxx © 2021 版權所有</div> </div> </body> </html>