CSS仅在检查后才起作用

Question

我在网站上遇到一种奇怪的行为：只有在我检查页面后，元素才会显示在正确的位置，否则我会在最后一个打印元素和屏幕底部之间留一个空白区域。

链接：http://reframe.thnk.org/tool/step/9/

这应该是它的样子：

这是默认情况下的样子：

我认为CSS或HTML代码有错误，但我已经运行了W3C验证器，两者都没有任何错误。

这里有一些HTML：

<div id="wrap">
...
</div>
<div class="clear"></div>
<div class="space32"></div>
<div id="sitemap">
...
</div>

这里有一些CSS：

.wrapper{
          font-size: 13px;
  line-height: 1.65em;
  font-family: 'Noto Serif',sans-serif;
  color: #333;
  max-width: 928px;
  margin: 0 auto;
    }
.clear{
        clear: both;
        height: 0;
        overflow: hidden;
    }
    .space32{
        height: 32px;
    }
.siteWrapper {
  font-size: 13px;
  line-height: 1.65em;
  font-family: 'Noto Serif',sans-serif;
  color: #000;
  max-width: 928px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 606px;
}

Answer 1

在步骤9中删除min-height: 100%，一切正常：）

#mainWrap {
  /* min-height: 100%; */
}