注：この動作は現在、Safariでのみ、特にタブがブラウザでどのように表示されているかによってのみ確認されます。 FirefoxとChromeは問題ありません。次のように他のすべてのタブを閉じるときに本文要素のサイズが変更されない
マイページのレイアウトが（名前だけが示されている）である：
<body>
<wrapper>
<header> ... </header>
<main_content> ... </main_content>
<footer> ... </footer>
</wrapper>
</body>
ヘッダとフッタは、一定の高さであるが、main_contentは動的です。
内容が不足している場合、flex:1と設定すると、フッターが自動的にウィンドウの下部に移動します。
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;
}
ほとんどの場合、それはあなたの期待どおりに機能します。正常に動作するウェブサイトのレイアウト。
問題
私が遭遇した問題は、新しいタブがナビゲーションバーの下部に配置されているのSafariで発生、とChromeのようなものではなくページの高さ（の一部を消費し、タブはコンテンツの高さに影響しません）。また、コンテンツが短い場合にのみ問題が発生するため、footerはウィンドウの一番下に表示されます。
セットアップ
ページが1つ以上のタブで、ロードされると、それだけで正常に見える：
あなたがそこに、（うまくいけば...）見ることができるように画像の上部に2つのタブがあります。ページの内容がビューポートを完全に埋める。計画通り！ （複数の場合、彼らはのみ表示されます）、しかしもある
タブがなくなっている
は：
しかし、その後、あなたが他のすべてのタブを閉じた場合の再現
ページの下部に不審なタブサイズの隙間（白い）が表示され、ページがビューポートを埋めるようにサイズ変更できませんでした。
ウィンドウのサイズを変更した場合、即座にスナップして領域を埋めます。インスペクタを開いてCSSプロパティを変更した場合は、直ちにスナップして領域を埋めます。しかし、これらのことのいずれかをやっていないと、これを防ぐためにCSSルールの組み合わせを見つけることはできません。
position:absolute;のさまざまな組み合わせを試しましたが、4つの側面はすべてゼロに設定されています。また、同じゼロを持つposition:fixed;。サイコロはありません。
どのような考えですか？
私は間もなく遊んでいきます。
Iが底に白いギャップの「要素を検証」追加
は、選択された要素は、トップレベルhtmlタグです。 bodyタグとそのすべての内容は、フッターの最後で終わります。
追加追加
問題は関係なく、あなたがそれらすべてを閉じ、タブでページをロードし、それらを閉じ、あるいは全くのタブでページを読み込み、1つ以上を開くかどうかに発生します。あなたは多分より多くの情報/指示を提供する必要が
可能なガイダンス：[Safariを除くすべてのブラウザで動作するFlexboxコード。なぜですか？]（http://stackoverflow.com/a/35137869/3597276） –