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>

ブログ自体に配置されるまで、すべてが完全に機能します。残念ながら、Tumblrはテーマの残りの部分の後に投稿を挿入するために使用される JavaScript を自動的に追加するため、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 に答える