要做这样一个页面：
- 整个页面铺满浏览器窗口，不出现滚动条，可以随意调整窗口大小；
- 顶部为<header>，高度固定为50px，水平铺满窗口；
- 底部为<footer>，高度固定为20px，水平铺满窗口；
- 左侧为<nav>，宽度固定为150px，垂直铺满余下的空间；
- 其余部分为<iframe>，铺满余下的空间。
将<header>和<footer>的宽度设为100%即可让它们水平铺满窗口，难点在于如何设置<nav>和<iframe>的高度。网上的做法一般是设置<html>和<body>的高度为100%，然后设置<nav>和<iframe>的高度为calc(100% - 70px)，但如果<nav>和<iframe>与<body>之间还有其他元素，那么它们都要明确设置相对高度。
其实CSS中有这样两个相对单位：
- vw：与视口（viewport）宽度挂钩。1vw等于文档显示区域（如浏览器窗口）宽度的1%；
- vh：与视口（viewport）高度挂钩。1vw等于文档显示区域（如浏览器窗口）高度的1%。
使用vh，就免去在<nav>和<iframe>的各个上层元素上设置相对高度的繁琐。
下面来看个完整的例子。首先创建页面的HTML代码，其中包含了构成页面的四个元素：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <!-- 引用样式表，将在其中定义创建页面布局的样式 --> <link href="Styles.css" rel="stylesheet" /> </head> <body> <header> header </header> <nav> nav </nav> <iframe src="FrameContent.html"></iframe> <footer> footer </footer> </body> </html>
然后创建作为<iframe>内容的FrameContent.html文件：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> body { background-color: antiquewhite; } </style> </head> <body> iframe </body> </html>
最后是创建页面布局的Styles.css文件：
body { /* 消除浏览器为页面默认生成的外边距 */ margin: 0; } header { width: 100%; height: 50px; background-color: darkkhaki; } nav { width: 150px; /* 这里使用了相对高度单位vh */ height: calc(100vh - 70px); float: left; background-color: cornflowerblue; } iframe { width: calc(100% - 150px); /* 这里也使用了相对高度单位vh */ height: calc(100vh - 70px); border: none; /* 将display设为block是为了去除iframe的底边距，设置margin为0是去不掉的 */ display: block; } footer { width: 100%; height: 20px; background-color: burlywood; }
最终效果如图。可以随意调整浏览器窗口大小，而不会出现滚动条。<iframe>指向的文档应该使用自适应宽度，而不是硬编码宽度。为防止<iframe>中的文档由于宽度太窄而变形，可为其引用的文档中的<body>元素设置min-width属性（注意不要直接在<iframe>上设置，否则宽度较小时，页面将出现滚动条）。
