我在网站上遇到一种奇怪的行为:只有在我检查页面后,元素才会显示在正确的位置,否则我会在最后一个打印元素和屏幕底部之间留一个空白区域。
链接: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;
}
答案 0 :(得分:1)
在步骤9中删除min-height: 100%
,一切正常:)
#mainWrap {
/* min-height: 100%; */
}