铺满浏览器窗口的界面设计

要做这样一个页面：

  1. 整个页面铺满浏览器窗口，不出现滚动条，可以随意调整窗口大小；
  2. 顶部为<header>，高度固定为50px，水平铺满窗口；
  3. 底部为<footer>，高度固定为20px，水平铺满窗口；
  4. 左侧为<nav>，宽度固定为150px，垂直铺满余下的空间；
  5. 其余部分为<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>上设置，否则宽度较小时，页面将出现滚动条）。

posted @ 2016-10-26 21:01  zhu'sDevlog  阅读(1951)  评论(0)  编辑  收藏  举报