5

タイトルが少しわかりにくい場合は申し訳ありませんが、問題を一文で説明する方法がわかりませんでした。ですから、基本的に私はフルページ/スクリーンデザインで数日から苦労しています。

私のデザインでは、いくつかのテキストを含む複数のDivがあり、そのうちの1つは通常の画面解像度の高さよりもはるかに大きくなっています。さらに、Webサイトにビューアのブラウザの横にスクロールを配置したくないので、Divに大きすぎるスクロールを配置します（このdivでoverflow：auto;を使用するなど）。しかし、divとスクロールの正しい位置を同時に取得することはできないようです。

これが私の状況のCodePenです。赤と青のDivをそのように配置したいのですが、青のDivがページの下部に到達したときに拡張を停止し、発生した場合はスクロールするようにします。

スクロールを取得する唯一の方法は、max-heightまたはabsolutepositioningを使用することです。ただし、青いdivの最大高さは画面の解像度ごとに異なり、赤いdivの高さは固定されていないため、これらのソリューションはどれも実行可能ではありません。また、絶対位置を使用しようとすると、青いdivが赤いdivの上に立ってしまいます。これは、青いdivの絶対位置によって「フロー」が残されるためです（マージントップを使用できません：「 red div " ; red divの高さが固定されていないため、この問題を解決します）。

うまくいけば、私の説明は明確で、誰かが私を助けることができるでしょう。ちなみに私はJSを使わないのですが、必要なら使うつもりです。さらに、私の視聴者の誰もがそれらを使用していないので、古いバージョンのIEにはないソリューションを歓迎します。

ありがとう、トーマスA

編集：明確にするために、私はそれをそのように見せたいのですが、青いdiv（＃bottom-inside-container）の高さは動的で固定されていません（divの先頭からページの下部までページのサイズ）

4

4 に答える 4

10

3年後、より優れたブラウザのサポートがあれば、flexboxプロパティを使用すると簡単になります。CSSに以下を追加することもできます。

#wrapper {
    display:flex; 
    flex-direction:column;
}
#top-inside-container {
    flex-grow:2;
}
#bottom-inside-container {
    flex-grow:1;
    overflow-x: hidden;
    overflow-y: auto;
}

小さいコンテナの上部にflex-grow：2を設定すると、すべてのコンテンツが表示されるまで成長します。コンテナ内の下部にオーバーフローを設定すると、表示する必要のあるコンテンツの量に応じて、スクロールバーが非表示（水平スクロールの場合）および設定（垂直スクロールの場合）になります。

最小限の変更を加えた、codepenに基づくコードを次に示します。

http://codepen.io/anon/pen/BLKENA

PD：私はグーグルから同様の答えを探して来ました...それはとにかく誰かを助けることができます。

于 2016-09-15T18:16:21.317 に答える
1

高さがない（または100％）ため、ラッパーはスクロールしません。次に、デフォルトのブラウザスクロールが適用されますが、ラッパーレベルでスクロールすることはできません。

スクロールは、ラッパーに高さを与えるだけで機能します-例：

#wrapper { 
  position:fixed;
  right:550px;
  left:0;
  background:rgb(200,200,200);
  height: 500px;
  overflow: auto;
}

これがお役に立てば幸いです

于 2012-09-30T13:30:41.223 に答える
1

これを行うには、青いdivをposition：absoluteに設定してから、topとbottomの両方の値を設定します。すなわち

html, body{
    width: 100%; height: 100%; margin: 0; padding: 0;
}
#top-inside-container {
    position: absolute; top: 0; width: 100%; height: 100px; background:rgb(75,0,0);
}
#bottom-inside-container {
    position: absolute; width: 100%; top: 100px; bottom: 0; background:rgb(0,75,200); overflow-y: scroll;
}

ここで動作しています：http： //codepen.io/anon/pen/qnwFf

于 2012-09-30T14:53:26.363 に答える
0

2番目に失敗したオプション（青いdivの絶対位置を使用）について、通常のフローを離れたために実行できなかったと言います。さて、私は、相対的な親で赤と青の両方のdivを囲むことによって、通常のフローを離れずにその青いdivを絶対的にしました。http：//codepen.io/anon/pen/KEdwGを参照してください。

しかし、それでも失敗します。理由は、現在の絶対的な青いdivをどの高さに設定するかです。あなたも私も答えることはできませんが、「overflow：scroll」はスクロールを開始する高さを知る必要があります。これがCSSだけではできない理由です。

したがって、jqueryを2行追加してもかまわない場合は、その方法で解決する方法について私のペンdocument.ready()を参照してください。ペンに入れたので、ページのコードを無視して、iframeを垂直方向にドラッグして方法を確認できます。青いdivは、予想される高さを維持し続けます。window.resize()

また、私のペンのcssコメントを見ると、親戚が正しく理解するために必要なものleft:25pxに変更します（ただし、一般的にはpxよりも％を使用する方が適切です）。4%

便宜上、ここにペンのjqueryコードを貼り付けます。

$(document).ready(function() {
  max = $(document).height() - $('#bottom-inside-container').offset().top;
  $('#bottom-inside-container').css('max-height',max);
});
于 2012-09-30T15:21:33.663 に答える