2

1 ページの Web サイト。ページのさまざまな div (セクション) へのアンカー リンクを含む上部のヘッダー。

画面の解像度が 1280*800 で、各 div セクションが最大 800 で、ブラウザが最大サイズのときに各 div セクションのコンテンツが表示されるとします。スクロールが無効になっていることを忘れていたので、他の div は上部のアンカー リンクを使用してのみ表示されます (自動的にスクロールされます)。ブラウザのサイズを変更すると、たとえば、ブラウザの高さが 450px しかない場合、画面にその量のコンテンツしか表示されず、div の下部までスクロールできないため、下部にヒットします。私のブラウザの。

理解しておくべきもう 1 つのポイントは、div 自体のすべての要素が div の高さからオーバーフローしていないことです。この問題はブラウザの高さのサイズに関係しているため、単純なオーバーフローは機能しません。

基本的に、ブラウザ ウィンドウが 800px 未満の場合、div はブラウザによって縮小された量だけ下部で覆われます。div の下部、つまり 800 番目のピクセルがブラウザーの下部に接触するように、div 全体 (IT 内のコンテンツではありません) を必要なだけ押し上げます (上部の位置)。

解決策はありますか？

4

3 に答える 3

2

ウィンドウ サイズの変化を聞いて、それに合わせて div のサイズを調整できます。このように、div は常にウィンドウのサイズになるため、小さすぎるとオーバーフローが表示されます。

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​

jsFiddleでの作業例。auto画面が小さくなりすぎたときに表示されるように、div のオーバーフローを に設定することを忘れないでください。

更新:あなたの更新で私が理解したことから、あなたの要件は単純な CSS で満たすことができます。自由にhtml, bodyオーバーフローさせますが、「コンテナ」divのオーバーフローを に設定しhidden(一度に 1 ページだけスクロールするようにします)、そのheightを に設定し800pxます。ブラウザー ウィンドウのサイズが 800 ピクセル未満に変更されると、本文のスクロール バーが表示され、コンテナー div を上下にスクロールできます。コンテナーとコンテンツの両方が同じサイズ (800px) のままになります。

html,body {
    overflow: auto;
}

.container, .contents {
    height: 800px;
    overflow: hidden;
}

jsFiddleでの作業例。それはあなたが必要とするものですか？コンテナーの div を文字通り、その下部がウィンドウに揃うまで押し上げたい場合は、padding-topormargin-topの代わりに設定してみてくださいtop(ただし、この場合、スクロールがどのように機能するかはわかりません)。

于 2012-10-24T23:06:51.013 に答える
0

メイン ラップの min-height を 800px に設定するのが最善の解決策だと思います。それ以外の場合は、メイン コンテンツにオーバーフローを非表示にする必要があります。スクロールは、メイン コンテンツの上部の位置を設定することでトリガーできますが、絶対的または類似している必要があります。あなたは関数魔女を書いて、メインコンテンツを移動してトップの位置を変更するのに役立ちます。

于 2012-10-24T23:07:55.953 に答える
0

メディア クエリを使用します。

@media screen and (max-height: 450px) {
  body { overflow: auto; } /* Or change the height or whatever */ 
}
于 2012-10-24T22:59:19.860 に答える