1

さて、私はウェブサイトに取り組んでいます。基本的に、Webサイト（または少なくとも私が取り組んでいるページ）は、次の基本構造に従います。

ヘッダー、左側のサイドバー、コンテンツ（表示されていません、フッター）

左側のサイドバーとコンテンツは同じ高さである必要があります（小さい方が大きい方の高さに拡張されます）。サイドバーの高さが高い場合もあれば、コンテンツの場合もあります。コンテンツ領域には流動的な幅があり、サイドバーには静的な幅があります。コンテンツ領域は、ユーザーが物をクリックしたときにAJAXを使用してコンテンツを動的にロードします。

また、AJAXとPHPに組み込まれたテーマチェンジャーがあり、ユーザーはさまざまな配色、ヘッダータイプ、固定または流動的なレイアウトを選択できます。

サイドバーとコンテンツの基本的な設定は次のとおりです。

<div id="main">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>

#main {
position: relative;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #dddddd;
}

#sidebar {
width: 239px;
padding: 0px 0px 0px 15px;
background: #f6f6f6;
border-right: 1px solid #ddd;
position: relative;
}

#content {
position: relative;
background: #fff;
top: 1px;
margin-left: 280px;
padding-top: 10px;
}

それはとにかくそれの要点です。とにかく、固定または流動的なレイアウトスタイルが選択されているかどうかに関係なく、サイドバーの高さがコンテンツよりも大きい場合はすべてが完全に機能するようにしています。ただし、コンテンツの高さがサイドバーの高さよりも大きい場合、サイドバーの高さはサイドバーのセクションを埋めるだけです（つまり、コンテンツの高さまでは拡張されません）。これは、コンテンツの高さがサイドバーの高さよりも大きい場合に、サイドバーセクションに絶対位置を追加することで簡単に修正できます。

したがって、基本的に、サイドバーdivの高さとコンテンツdivの高さを継続的に動的に比較できるかどうかを知る必要があります。コンテンツdivの高さがサイドバーdivの高さよりも大きい場合は、サイドバーdivの絶対位置を追加します（位置を削除します。サイドバーのdivの高さがコンテンツのdivの高さよりも大きくなった場合は絶対になります）。

よくわからない場合は申し訳ありませんが、ご不明な点やご不明な点がございましたら、お気軽にご不明な点がございましたら、お気軽にお問い合わせください。

あなたが提供できるどんな助けにも感謝します！

現在、サイドバーの高さがコンテンツの高さよりも大きい場合：

http://i.imgur.com/h6AWSdR.png（これは良いです）

現在、サイドバーの高さがコンテンツの高さよりも低い場合：

http://img845.imageshack.us/img845/9093/11d97de76d7d499389bc6a2.png（これは悪いです---サイドバーには位置が必要です：修正するには絶対に追加します）

編集：

ネルソンのおかげで、これまでのところほとんど機能しています。

今私は持っています：

<script>
  $(document).ready(function() {
    if ($('#contentbody-wrapper').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
      $('#sidebar').css('position','absolute');
    } else { $('#sidebar').css('position','relative'); }

  $('#contentbody-wrapper').on('ajaxComplete', function() {
    if ($('#contentbody-wrapper').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
      $('#sidebar').css('position','absolute');
    } else { $('#sidebar').css('position','relative'); }
   });
});
</script>

ページの読み込みでは機能しますが、ボタンをクリックしてコンテンツをajaxで読み込まれたコンテンツに置き換えると機能しますが、ボタンをクリックして元のコンテンツを元に戻すと、位置がわかります。次に、ボタンをもう一度クリックしてajaxコンテンツを再度ロードすると、相対的な位置になります。相対的な位置になります。次に、ボタンをクリックして元のコンテンツを再度ロードすると、正しい位置（相対）が表示され、ajaxコンテンツのロードボタンをもう一度クリックすると、正しい位置（絶対）が表示されます。

だからそれは毎回うまくいくようです...

4

1 に答える 1

1

コンテンツdivがajax呼び出しによってコンテンツをロードすると言うように、グローバルajaxイベント をリッスンできますajaxComplete。これは、コンテンツの親divなどの目的のdivコンテナー内でajax呼び出しが完了するたびにトリガーされ、高さを確認します。

このようなもの：

$('#content_container').on('ajaxComplete', function() {
   setTimeout(function() {
      if ($('#content_container').prop('offsetHeight') > $('#sidebar').prop('offsetHeight') ) {
         $('#sidebar').css('position','absolute');
      }
   }, 300); //check for heights after 300ms of ajaxComplete event
});

更新：
ADMが新しいディメンションを更新するための余分な時間を与えるために、ajaxが完了した後の短いタイムアウトで高さをチェックするように更新されました。

于 2013-02-24T19:41:07.643 に答える