CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sullivan Grey
Sullivan Grey

Reputation: 1

Actual <DIV> size is bigger than expected

Well, to start with, here is the HTML template:

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

As you can see, the pages are placed below the header and they become visible by JS code (initially they are not).

It all works, the problem is that the page is sized to the height of screen and ignores the header height. So you can see a scrollbar going outwards the screen borders.

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

Even if the page doesn't have any content, the page is still the full screen size.

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;
}

Why does this happen, and how can I get rid of it without JS?

Upvotes: 0

Views: 801

Answers (1)

Kheema Pandey
Kheema Pandey

Reputation: 10265

in your class .page instead of using height:100% and width:100% use auto.

Upvotes: 1

Related Questions