Question

注意：此行为目前仅在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与窗口底部完全齐平。

设置

当页面加载时，有一个或多个标签，看起来很好：

正如您所见（希望......），图像顶部有两个标签。页面内容完全填充视口。正如计划一样！

再生

但是如果你关闭所有其他标签：

选项卡已经消失（它们只在多个时出现）， BUT 页面底部还有一个可疑的标签大小的间隙（白色），页面未能显示调整大小以填充视口。

如果我调整窗口大小，它会立即快速回到填充区域。如果我打开检查器并更改任何CSS属性，它会立即快速回到填充区域。但是，如果没有做其中的一件事，我就无法找到CSS规则的组合来防止这种情况发生。

我尝试了position:absolute;的各种组合，所有四个边都设置为零。同样position:fixed;具有相同的零。没有骰子。

有什么想法吗？

我会在过渡期间继续玩游戏。

其他

当我＆＃34;检查元素＆＃34;在底部的白色间隙上，所选元素是顶级html标记。 body标记及其所有内容均以页脚底部结尾。

其他附加

无论您是使用制表符加载页面，然后关闭它们，还是加载没有制表符的页面，然后打开一个或多个页面，然后全部关闭它们，就会出现问题。

Answer 1

知道了！

只需在每个文件中包含以下JS（...和JQuery）函数：

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

可能不太理想，但效果很好。无法为我的生活找到一个纯粹的CSS修复。

Answer 2

您需要提供更多信息/说明，我觉得这种方法有效：

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

在body标签上添加高度可能会帮助你。

关闭所有其他标签时，Body元素不会调整大小

2 个答案: