2

サイドバー div の高さを増やしてコンテンツ div の高さと等しくするための単純な JavaScript 関数があります。これが私がこれを行う方法です....

Javascript:

<script type="text/javascript">
function absar(){
document.getElementById("sidebar").style.height = document.getElementById("content").clientHeight;
    }</script>

HTML:

<body onLoad="absar()">
<div id="sidebar" style="border:1px solid red">Few content</div>
<div id="content" style="border:1px solid red">
some content <br>
some content <br>
some content <br>
some content <br>
some content <br>
</div>
</body>

このコードは、サイドバーの高さをコンテンツ div の高さと等しくします。** わかった**

しかし、bodyタグの直後に同じコードをwordpressに貼り付けて（同じid値contentと）、bodyに提供すると、何もしません。まったく何もしません。sidebaronload="absar()"

ほぼ全体のレイアウトを設計したこの時点で、Faux Columns やテーブルなどの新しいソリューションを使用することはできません。

4

3 に答える 3

8

ついに愚かなcssトリックが機能し、完璧に機能しました...。

私が設定したサイドバーdiv用

padding-bottom: 5000px;
margin-bottom: -5000px;

サイドバーとコンテンツdivを含むコンテナーの場合。設定しました

overflow: hidden;

そしてそれは完璧に機能しました-私が望んでいたように、このトリックの欠点を知っているなら教えてください...私がいくつか見つけたらここに投稿します、

以下はサンプルコードです、

HTML

<div class="main">
<div class="sidebar">Few Sidebar Widgets</div>
<div id="content"> 
Bang Bang Content <br>
Bang Bang Content <br>
Bang Bang Content <br>
</div> <!-- End of Content -->
</div> <!-- End of Main -->

CSS

#main{
overflow:hidden;
}

#sidebar{
padding-bottom: 5000px;
margin-bottom: -5000px;
}
于 2012-12-29T14:23:35.710 に答える
1

@Absar の回答に加えて、適応を追加できますか?

これは私がしました：

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

誰かが高さ 5000 ピクセルを超える巨大な画面でサイトを表示している可能性 (非常にまれ) に対応するために、「101%」のことを行いました。

素晴らしい答えですが、アブサー。それは私にとって完璧に機能しました。

于 2014-02-01T18:33:06.840 に答える
0

いくつかの理由から、これは Javascript ではなく、適切な CSS と HTML マークアップを使用して解決する必要があります。主な理由は、サイト ロジックとプレゼンテーション レイヤーの分離です。CSS は単に視覚的なレイアウトのためのものであり、単純なプレゼンテーションの問題は CSS ドメインで解決する必要があります。これはあなたの質問の場合のようです。

この CSS トリックの記事をご覧になることをお勧めします。それは啓発的で徹底的です。

それが役に立てば幸い。

于 2012-12-28T18:49:02.040 に答える