我有一个页面,当页面加载时,我把所有内容的绝对DIV用" height:100%"表示"页面正在加载...".
但是,从滚动条看,页面高度为100%+内容的高度.
一旦页面加载并且覆盖绝对定位DIV设置为,这将立即消失display:none.
这种情况发生在Firefox 3,Chrome,IE6中.
关于如何制作身高的任何想法:100%,只是100%而不是更多？
<html>
<head>
<style type="text/css">
* html, * body {height: 100%; margin: 0; padding: 0}
#message {background: black; height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0%; width: 100%}
#loading {height: 100%; left: 0; position: absolute; top: 45%; width: 100%; z-index: 2}
#loading p {background: white; border: 2px solid #666; width: 180px}
</style>
</head>
<body>
<div id="grayout"></div>
<div id="loading"><p>Page is loading...</p></div>
<div id="content">
// content is dynamically loaded into this div via AJAX
</div>
</body>
</html>
更新:看来问题是我有"最高:45%".如何将DIV移动到页面的中心(因为它是"页面正在加载消息")而不会再次引起同样的问题？
如果该元素具有垂直填充或边距,则根据CSS规范将其添加到块的高度(有关绝对定位的,未替换的元素,请参阅可视格式化模型).
编辑 将top:45%被向下移动你的元素45%.删除它(top:0)或将元素的高度设置为auto(默认值).