用js设置加载屏幕高度 - 如何在JS运行之前防止错误高度的闪烁？

我已经有过这个问题几次，现在想解决。用js设置加载屏幕高度 - 如何在JS运行之前防止错误高度的闪烁？

var browserHeight = $(window).height(); 
var headerHeight = $('#brand-header').outerHeight(true); 
$('#intro').height(browserHeight-headerHeight);

但在页面加载，有其天然的（和不正确的）高度之前内容的闪光：

通过像这样在我的JS文件比较窗口高度设置加载屏幕的高度适当调整大小。不是我现在正在工作，但最近的网站的一个例子，解决这个问题没有解决（警告本网站有负载的声音（尽管我竭尽全力劝阻））：http://www.brooklyn.cuny.edu/web/academics/schools/mediaarts/schools/feirstein.php

什么是防止这个？

来源

2014-09-23 megkadams

为什么你不使用位置：相对和宽度和高度100％？

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.full { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.full.red { 
 
    background-color: orangered; 
 
} 
 
.full.green { 
 
    background-color: darkseagreen; 
 
}

<div class="full red"></div> 
 
<div class="full green"></div>

来源

2014-09-23 18:44:41 Tengiz

不错。应该已经意识到了。非常感谢！ – megkadams 2014-09-23 19:37:18

一种选择是增加一类，设置visibility: hidden到两个要素使它们占用的页面，但无形的空间。然而，这会将你错误高度的闪光改变为背景颜色的闪光。

另一种选择是，以确保该#intro使用vh或添加一组height: 100%性能和绝对定位#brand-header占据了屏幕的100％。我认为大部分时间是以水平和垂直居中的方式完成的，例如#intro，屏幕本身不到屏幕减去标题，所以试着问这个问题。

而且您可以随时添加一个不透明的叠加div，在高度全部设置后删除。

来源

2014-09-23 18:51:22 ckuijjer

所有非常有帮助。非常感谢！ – megkadams 2014-09-23 19:37:47

用js设置加载屏幕高度 - 如何在JS运行之前防止错误高度的闪烁？

回答

相关问题