Body element does not resize when closing all other tabs

Question

Note: This behaviour is currently only observed in Safari, specifically because of how the tabs are presented in the browser. Firefox and Chrome are fine.

My page layout is as follows (just names shown):

<body>
  <wrapper>

    <header> ... </header>
    <main_content> ... </main_content>
    <footer> ... </footer>

  </wrapper>
</body>

The header and footer are constant height, but the main_content is dynamic.

I have main_content set as flex:1 to automatically push the footer to the bottom of the window, when the content is short.

body {
    padding: 0px;
    margin: 0px;
}

#wrapper {
    width: 100%;
    min-height: 100vh;
    padding: 0px;
    margin: 0px;

    display: flex;
    flex-direction: column;
    position: relative;
}

#header {
    width: 100%;
    height: 60px;
    margin: 0px;
    padding: 0px;
}

#main_content {
    width: 100%;

    flex: 1;

    margin: 0px;
    padding: 50px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#footer {
    width: 100%;
    height: 350px;
    margin: 0px;
    padding: 0px;
}

And for the most part, it all works exactly like you'd expect it to. A normally-behaving website layout.

The Problem

The issue I've encountered occurs in Safari, where new tabs are placed at the bottom of the nav-bar, and consume some of the page height (opposed to something like Chrome, where the tabs do not affect the height of the contents). Also, the issue only presents itself when the content is short, and so the footer is exactly flush to the bottom of the window.

The Setup

When the page is loaded, with one or more tabs, it looks just fine:

As you can see (hopefully...), there are two tabs open at the top of the image. The contents of the page completely fill the viewport. Just as planned!

Reproducing

But then if you close all other tabs:

The tabs are gone (they only appear if more than one), BUT there is also a suspiciously tab-sized gap at the bottom of the page (white), where the page has failed to resize to fill the viewport.

If I resize the window, it immediately snaps back to filling the area. If I open the inspector and change any CSS property, it immediately snaps back to filling the area. But short of doing one of those things, I can't find a combination of CSS rules to prevent this from happening.

I've tried various combinations of position:absolute; with all four sides set to zero. Also position:fixed; with the same zeroes. No dice.

Any thoughts?

I'll keep playing around in the interim.

Additional

When I "Inspect Element" on the white gap at the bottom, the element selected is the top-level html tag. The body tag, and all its contents, end at the bottom of the footer.

Additional Additional

The problem occurs regardless of whether you load the page with tabs, and then close them, or load the page with no tabs, then open one or more, then close them all.

possible guidance: [Flexbox code working on all browsers except Safari. Why?](http://stackoverflow.com/a/35137869/3597276) — Michael Benjamin, Jul 10 '16 at 13:35

score 0 · Accepted Answer · answered Jul 10 '16 at 08:53

Got it!

Just need to include the following JS (... and JQuery) function in each file:

$(window).on('resize', function(){
    $('#wrapper').css('min-height', $(window).height());
});

It might not be ideal, but it works well. Couldn't, for the life of me, figure out a pure CSS fix.

Carol McKay · Answer 2 · 2016-07-10T07:56:59.250

-1

You need to provide more info / instruction maybe, I find this approach effective:

#main_content {
    flex:1 1 calc(100vh - (60px + 350px)); 
/* header height & footer height subtracted */
}

Also adding a height on the body tag might help you out.

edited Jul 10 '16 at 07:56

answered Jul 10 '16 at 07:39

Carol McKay

2,438
1
15
15

Did you test this? I'm still getting the exact same result. I'm a heavy user of the `flex:1` property - it has never let me down until now. Either way, I'm pretty confident that it has nothing to do with the flex stuff at all, but rather the body is simply not resizing. – Birrel Jul 10 '16 at 07:42
Testing it is up to you @Birrel – Carol McKay Jul 10 '16 at 07:44
you've posted your **ANSWER** in the **ANSWER** section. If you are not willing to test it, put it as a comment - the usual "have you tried..." sort of thing. People expect the **ANSWER** section to contain tested, accurate information. Not just some off-the-cuff guess. – Birrel Jul 10 '16 at 07:46
It's a whopping 4 divs, and I've supplied every CSS rule you need. Don't be so lazy. – Birrel Jul 10 '16 at 07:48
I told you it has worked for me in previous jobs "I find this approach effective" and of course I do thorough browser device testing before I release my work. I didn't test YOUR specific code. And you are being over the top rude by the way. – Carol McKay Jul 10 '16 at 07:51
So did you try something like height or min-height of calc(100vh - (60px + 350px)); on your #main_content div out of curiosity? And did you try a height on the body and html tag? – Carol McKay Jul 10 '16 at 09:33
None of the hight settings made any difference. I tried every CSS combination I could think of. I'm not sure what's going on with it, but the fix I posted is good enough for now. – Birrel Jul 10 '16 at 09:44
bloody browser wars! Grrr. – Carol McKay Jul 10 '16 at 09:47

Body element does not resize when closing all other tabs

2 Answers2

Linked