Question

我正在尝试使用它：

<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。

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

Answer 1

最有可能的是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>

强制javascript读取字母代码

1 个答案: