IE—fullscreen, centered content

Question

I have setup a site with content region of fixed width and variable height, horizontally and vertically centred, based on the css and html found in this answer.

That works pretty fine in all Browsers I have tested, even in IE (11). However the page needs to work in fullscreen mode, too and if i run it in ie, the content goes to the upper left corner.

here is my html:

div.wrapper-1 {
 display: table;
 position: absolute;
 height: 100%;
 width: 100%;
}

div.wrapper-2 {
 display: table-cell;
 vertical-align: middle;
}

div.wrapper-3 {
  margin: 0px auto;
  width: u($page-width);
}

<body>
    <div class="wrapper-1">
        <div class="wrapper-2">
            <div class="wrapper-3">
            <!-- does all my content go -->
            </div>
        </div>
    </div>
</body>

What can I do to make that work in fullscreen, too?

Thanks for help!

For me its a Program to break websites… At best it is meant to be a browser… — philipp, Sep 19 '14 at 13:33

score 2 · Accepted Answer · answered Sep 19 '14 at 15:16

2

Finally, after digging around I could get it up and running!

I added that to my css:

html {
    width: 100%;
    height: 100%;
}

answered Sep 19 '14 at 15:16

philipp

15,947
15
61
106

score 0 · Answer 2 · answered Sep 19 '14 at 13:44

0

On your div.wrapper2 and 3 set a position:relative; This will keep it relative to your div.wrapper1 and should solve that issue. This is also found on the second part of the answer you linked.

answered Sep 19 '14 at 13:44

Screech129

110
5

that does not work. The content keeps sticking in the upper left… – philipp Sep 19 '14 at 15:14

IE—fullscreen, centered content

2 Answers2