关闭所有其他标签时，主体元素不会调整大小 [英] Body element does not resize when closing all other tabs
问题描述
注意：此行为目前仅在Safari中观察到，特别是因为标签在浏览器中的显示方式。 Firefox和Chrome都很好。
我的页面布局如下（仅显示名称）：
< body>
< wrapper>
< header> ...< / header>
< main_content> ...< / main_content>
< footer> ...< / footer>
< / wrapper>
< / body>
页眉和页脚是常数高度，但 main_content 是动态的。
我已将 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 完全与窗口底部齐平。
设置
当页面加载时，有一个或多个标签，看起来很好：
正如你可以看到的（希望...）是在图像顶部打开的两个选项卡。页面的内容完全填充视口。按计划！
复制
但是如果您关闭所有其他标签：
标签页已删除如果多于一个，则会出现 ）。在页面底部还有一个可疑的标签页大小的间隙（白色），其中页面未能调整大小以填充视口。
如果我调整窗口大小，它会立即弹回到填充区域。如果我打开检查器并更改任何CSS属性，它会立即弹回到填充该区域。
我尝试了<$ c的各种组合$ c> position：absolute; ，所有四边都设置为零。还有 position：fixed; 具有相同的零。没有骰子。
有任何想法吗？
我会在这期间继续玩。
其他
当我在底部的白色空白处检查元素选择的是顶层 html 标记。 正文标记及其所有内容结束于页脚底部。
无论您是否使用标签载入页面，然后关闭页面，或者加载没有标签页的页面，然后打开一个或多个，然后全部关闭。
知道了！
需要在每个文件中包含以下JS（...和JQuery）函数：
$（window） resize'，function（）{
$（'＃wrapper'）css（'min-height'，$（window）.height（））;
}
这可能不太理想，但效果很好。不能，对我的生活，找出一个纯CSS修复。
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.
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.
这篇关于关闭所有其他标签时，主体元素不会调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
