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

Question

这个问题我遇到过好几次了，想解决。

通过与我的 JS 文件中的窗口高度进行比较来设置加载屏幕的高度:

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

但是在页面加载时，在适当调整大小之前，内容会在其自然(且不正确)的高度闪烁。不是我现在正在做的事情，而是最近完成的未解决问题的站点的示例(警告该站点在加载时声音很好(尽管我尽了最大努力劝阻)):http://www.brooklyn.cuny.edu/web/academics/schools/mediaarts/schools/feirstein.php

防止这种情况的最佳方法是什么？

Answer 1

为什么不直接使用 position: relative 和 width and height 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>