2

いくつかのヘッダー、いくつかのメイン コンテンツ、およびフッターを含むページ レイアウトを設計しようとしています。

メイン コンテンツで jQuery UI タブ ウィジェットを境界線で使用したいので、div はヘッダーとフッターの間のすべてのスペースを埋める必要がありますが、必要に応じてコンテンツを画面の下部から拡張し、スクロールバーが表示されるので、下にスクロールして表示できます。

事実上、コンテンツ div の最小の高さをヘッダーとフッターの間の距離にしたいのですが、拡張できるようにします。

スティッキー フッターメソッドを実装しました。これは、メイン コンテンツの周りに境界線が必要ない場合に非常にうまく機能します。このjsFiddleの例では、赤い 2 ピクセルの境界線を持つ div が最初にページを埋める必要があり、「追加」ボタンをクリックして画面の下部からはみ出すコンテンツを追加するときは、フッターを押し下げて a を表示する必要があります。スクロール・バー。

これは私が達成しようとしているものです:

ここに画像の説明を入力

...次のルールで:

  • コンテンツには境界線が必要です。
  • コンテンツは、ヘッダーとフッターの間のスペースを埋めることから始める必要があります。
  • スクロールバーを表示して、ページの下部を超えてコンテンツを拡張する必要があります。
  • コンテンツが大きくなるにつれて、フッターを下げる必要があります。
  • CSS のみを使用して、コンテンツが動的に変更された場合にすべてが自動的に調整されるようにします。
  • 最新のブラウザーでのみ動作します。IE < 8 のサポートには興味がありません。

私はもう試した：

  • 絶対配置ですが、これによりコンテンツが画面のサイズに固定され、下部を超えて拡大することはできなくなります。
  • jQueryのポジショニングですが、これはハックのように感じられ、修正するには悪い方法のようです.
  • height: 100%andをさまざまな場所で使用min-height: 100%していますが、私が望むものを達成していないようです。
  • 同じ問題に関する他のスタック オーバーフローの質問を見ると、画面の下部を超えてコンテンツが拡大していることを説明しているようには見えません。
4

2 に答える 2

0

私が思いつくことができる最高のものはhttp://jsfiddle.net/Atjxc/6/です

ウィンドウの高さは可変であるため、パーセンテージのみと絶対位置を使用する必要がありました。

.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}

コンテンツが長くなりすぎたときにスクロールバーを表示するメイン パーツのコンテナーを追加しました。ピクセル値で設定する必要があるため、境界線を配置できませんでした。パーセンテージベースの高さが台無しになります。

于 2013-01-22T13:43:55.133 に答える
0

さて、ヘッダーとフッターの間の実際の距離を測定してから、最小高さをその正確なピクセルに設定することができます.

たとえば、間の距離は600pxです。

次に設定します

min-height:600px;
height:100%

このようにして、min-height をはるかに下回るコンテンツがある場合。600px の場合、高さは 600px になり、コンテンツが追加されて 600px の高さを超えた場合、コンテナの div は、height:100% でカバーされる追加されたコンテンツに対応するために高さが伸びます。.

そして、ええ、「Measure It」（chrome / firefox拡張機能）を使用して、オンザフライで画面上の距離を測定できます。そのほうが便利です。

これが役に立てば幸いです。jsfiddle http://jsfiddle.net/Atjxc/11/をご覧ください。

于 2013-01-22T15:58:44.420 に答える