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中，而不是使用height:100%和width:100%使用auto。

实际<div>大小大于预期</div>

1 个答案: