javascript - 实际 大小比预期的大

Question

好吧，首先，这是 HTML 模板:

<div id="content">
    <header>...</header>
    <div id="pages">
        <div class="page">...</div>
        <div class="page">...</div>
        <div class="page">...</div>
    </div>
</div>

如您所见，页面位于标题下方，并且通过 JS 代码可见(最初它们不可见)。

一切正常，问题是页面的大小调整为屏幕的高度并忽略了页眉高度。因此，您可以看到一个滚动条向外延伸到屏幕边框。

+--------------------------+   ---------
| HEADER                   |      |
|                          |      |
*--------------------------*      |
| PAGE                     |      |
| content                  |      | - SCREEN SIZE
| content                 #|      |
| content                 #|      |
| content                 #|      |
+--------------------------+   ---------
| content                 #|
| content                 #|     # is scrollbar
*--------------------------*

即使页面没有任何内容，页面仍然是全屏大小。

CSS:

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

header {
    background-color: #fdc162;
    padding-bottom: 1em;
    height: auto;
}

.page {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;

    visibility: hidden;
    overflow: auto;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

为什么会发生这种情况，如果没有 JS，我该如何摆脱它？

Answer 1

在你的类 .page 中使用 auto 而不是 height:100% 和 width:100% .