要做这样一个页面:
- 整个页面铺满浏览器窗口,不出现滚动条,可以随意调整窗口大小;
- 顶部为<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>上设置,否则宽度较小时,页面将出现滚动条)。