0

我正在尝试使用这个：

<script type="text/javascript">
   document.getElementById("towerwrapper").style.height=document.documentElement.clientHeight;
</script>

拉伸 div 为 tumblr 主题制作动态调整大小的图像。本质上，它应该创建一个从页面顶部延伸到底部的塔，居中，并被帖子部分遮挡。塔本身包含一个包装器和一系列格式如下的 div：

#towerwrapper {
   position:absolute;
   width:100%;
   top:0px;
   z-index: -10;
}

#floor6 {
   height:16.6%;
   width:192px;
   background: url("http://imageshack.us/a/img37/7831/i1v.png") repeat-y center bottom;
   margin:0 auto;
}

#floor5 {
   height:16.6%;
   width:256px;
   background: url("http://imageshack.us/a/img594/1337/ug6.png") repeat-y center bottom;
   margin:0 auto;
}

#floor4 {
   height:16.6%;
   width:416px;
   background: url("http://imageshack.us/a/img545/6572/b522.png") repeat-y center bottom;
   margin:0 auto;
}

#floor3 {
   height:16.6%;
   width:448px;
   background: url("http://imageshack.us/a/img16/3695/qrd.png") repeat-y center bottom;
   margin:0 auto;
}

#floor2 {
   height:16.6%;
   width:480px;
   background: url("http://imageshack.us/a/img824/5330/thq.png") repeat-y center bottom;
   margin:0 auto;
}

#floor1 {
   height:16.6%;
   width:543px;
   background: url("http://imageshack.us/a/img51/6671/8g2.png") repeat-y center bottom;
   margin:0 auto;
}

然后它们基本上被镶嵌：

<div id="towerwrapper">
<div id="floor6"><img src="http://imageshack.us/a/img843/4886/eu6.png"></div>
<div id="floor5"><img src="http://imageshack.us/a/img18/3192/cfnp.png"></div>
<div id="floor4"><img src="http://imageshack.us/a/img690/1014/9rph.png"></div>
<div id="floor3"><img src="http://imageshack.us/a/img543/7551/6d.png"></div>
<div id="floor2"><img src="http://imageshack.us/a/img856/5430/7tb.png"></div>
<div id="floor1"><img src="http://imageshack.us/a/img849/1158/jx44.png"></div>
</div>

一切都完美无缺，直到它被放入博客本身。不幸的是，这行 javascript 无法读取页面的完整高度，因为 Tumblr 会自动在主题的其余部分之后添加用于插入帖子的 javascript。

有没有办法强制脚本阅读帖子？如果没有，是否有更好的方法来确保包装器保持整个页面大小？

4

1 回答 1

0

javascript 很可能在页面的开头运行。

尝试仅在页面加载完成后运行它：

<script type="text/javascript">
   function adjustTower() {
       document.getElementById("towerwrapper").style.height=document.documentElement.clientHeight;
   }
   window.onload = adjustTower;
</script>

如果内容被异步加载，您可能希望在超时后尝试执行调整：

<script type="text/javascript">
       function adjustTower() {
           setTimeout(function () { 
               document.getElementById("towerwrapper").style.height=document.documentElement.clientHeight;
           },500);
       }
       window.onload = adjustTower;
</script>
于 2013-06-15T05:11:13.743 回答