11.1.4 穿上马甲

既然是网页版 word，就得穿上 word 的马甲，让人一眼看上去它就是真正的 word。其实，也非常简单。

CSS3 提供了 border-image 特性，只需搞一个 word 的截屏，再把它设置为 wrapper 容器的边框图像，就有了 word 的轮廓，看上去就像真正的 word 了。

由于图像边框会占据容器的空间，所以，需要调整容器的内边距，以便容器中的内容不会被边框图像所覆盖。CSS代码如下：

#wrapper {
    display: flex;
    border-image-source: url(img/word.png);
    border-image-slice: 201 4 31 4;
    border-image-width: 201px 4px 31px 4px;
    padding: 201px 4px 31px 4px;
}

上述代码中，容器 padding 属性的值，跟 border-image-width 属性的值完全相同。因为容器内边距的尺寸，由图像边框的宽度来决定的，实际上也就是切片的宽度。穿上马甲后的运行效果如图 11‑4 所示：

乍一看，我们的网页版word已经真假难辨了，而仔细看，还是有差距。真正的 word，在内容溢出时，是在内容（目录和正文）上添加滚动条，内容滚动时，外轮廓保持不动。

而我们的网页版word，是在浏览器主窗口上添加滚动条，轮廓随内容一起滚动，稍微往下滚动一点，word 的轮廓就移出视线，看不出来它是 word 了。

乍一想，如果把 wrapper 容器的高度固定下来，让其跟浏览器窗口的高度相同，即把 wrapper 的 height 设置为 100% ，浏览器主窗口就不会有滚动条了。

#wrapper {
     …
     height: 100%;
}

而运行之后，结果并非如此，依然是在浏览器主窗口上添加滚动条。经过一番研究之后，终于找到答案：根据W3C规范，元素的百分比高度是基于其父元素的高度。例如，把一个 div 的高度设定为 height: 50%，而其父元素的高度是 100px，则这个 div 的高度就是 50px。

所以，要使 wrapper 容器的高度跟浏览器窗口的高度相同，必须先把 html 和 body 元素的 height 设置为 100% 才行。

html, body {
    height: 100%;
}

当然，还要把 nav 和 main 的 overflow 属性设置为 auto。这样，在内容发生溢出时，nav 和 main 才会自动出现滚动条。否则，还是在浏览器主窗口上添加滚动条。

nav, main {
    …
    overflow: auto;
}

此时运行，才符合的预期，滚动条加到 nav 和 main 容器上了，而浏览器主窗口上也没有滚动条了。运行结果如图 11‑5 所示：

从上图可以看出，现在可以对 nav 和 main 的内容进行单独控制，互不影响。并且，无论谁在滚动，word 轮廓始终不动，是不是可以以假乱真了。