1

少し前にこれに似た質問を投稿しましたが、問題の一部を修正するための助けを得ましたが、サイドバーがまだ思うように機能しないことに気付きました。

問題は、今のところ、フッターに合わせたいサイドバーがありますが、「ウィジェット」の後に停止することです。言い換えれば、サイドバー自体に常に十分なコンテンツがあるわけではありませんが、サイドバーがメインコンテンツに続いてフッターまで続くようにしたいと考えています。

これを行う方法をいくつか試しましたが、まだ良い解決策が見つかりません.誰か助けてもらえますか? :)

これがプロジェクトのCODEPENです。

マイケル

4

2 に答える 2

1

必要な場所に到達するための古い学校のハックがあります。

次のようなものと仮定しましょう。

<div id="container">    //  Give it overflow: hidden;
  <div id="maincontent">
     Your main content goes here  // Assumes this is always taller than sidebar
  </div>
  <div id="sidebar">
     This is your sidebar stuff  // Give it a height of something like height: 16000 px;
  </div>
</div>

<div id="footer">
   This is your footer stuff
</div>

この方法を使用すると、サイドバーは常にすべての中で最も高くなりますが、CSS でサイドバーが隠されているオーバーフローがあるため、サイドバーは「メインコンテンツ」DIV と同じ高さしかありません。

パート2：

OK、ハックに問題が見つかりました。重要な部分を忘れていました。

サイドバーは忘れてください: height: 16000px;

padding-bottom: 5000px と margin-bottom: -5000px; が必要です。// または任意の値。負の数を除いて、margin-bottom は padding-bottom と同じサイズでなければならないことを覚えておいてください

于 2013-03-12T11:02:33.577 に答える
0

共通のクラスを指定し、Equal Heights などのスクリプトを使用する必要があります。詳細については、 http://filamentgroup.com/lab/setting_equal_heights_with_jquery/ を参照してください。

編集:例として、ライブラリを含め、両方の要素 (サイドバーとコンテンツ コンテナー) に class があると仮定すると、eq-heightこのブロックをテンプレートに追加する必要があります<head>。

<script type="text/javascript">
  $(document).ready(function() {
    $('eq-height').equalHeights();
  });
<script>
于 2013-03-12T10:40:44.703 に答える