效果预览
页面要求：
- 上下固定高度
- 左右固定宽度
- 中间区域自适应宽高
- 整个页面内容撑满全屏，没有滚动条
技术要点
使用 html5 语义化标签
- header 网页内的标题区域
- nav 导航区域
- aside 侧边栏
- footer 页脚区域
- section 内容分区
- article 文章区域
清除浏览器默认的内外边距
html, body { padding: 0px; margin: 0px; }
否则会出现滚动条
设置内容高度为 100 vh 撑满屏幕
body { height: 100vh; }
另一种方案是设置 html 和 body 高度为 100%
html,body { height:100% }
flex实现自适应布局
垂直方向
body { display: flex; flex-direction: column; } #mainBox { flex-grow: 1; }
水平方向
#mainBox { display: flex; } #centerBox { flex-grow: 1; }
演示代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS “四合院”布局</title> <style> html, body { padding: 0px; margin: 0px; } body { display: flex; flex-direction: column; height: 100vh; } header { height: 100px; background-color: blue; } footer { height: 60px; background-color: black; } #mainBox { flex-grow: 1; background-color: gray; display: flex; } #leftBox { width: 300px; background-color: red; } #centerBox { flex-grow: 1; } #rightBox { width: 200px; background-color: yellow; } </style> </head> <body> <header></header> <section id="mainBox"> <aside id="leftBox"></aside> <article id="centerBox"></article> <aside id="rightBox"></aside> </section> <footer></footer> </body> </html>
