CSSレイアウトでbodyにオーバーフロー属性を設定してもコンテンツがオーバーフローしないのはなぜですか? _html/css_WEB-ITnose

上の緑色の領域がページを超えています。 Set overflow:scroll;

結果は以下のようになります。 見た目だけスクロールできません。



ガイドを求めている初心者~

ディスカッションに返信 (解決策)

本文の高さを固定して設定する必要があります。そうでない場合、コンテンツが視覚領域の高さを超えなければ、自然に高さが表示されます。ウィンドウを変更できます サイズを変更することで効果を確認できます

本文の高さを固定に設定する必要があります。そうしないと、コンテンツが視覚領域の高さを超えない場合、当然スクロールしません。ウィンドウのサイズを変更して効果を確認できます
確かに、最初はBODYのHEIGHTを100％に設定していたので、効果はありませんでしたが、100％を超えるとスライドできるようになりました。しかし、各 div の高さはパーセンテージで設定されているのに、体の高さを変更しても高さが変わらないのはなぜですか?

どこで間違っていたのか理解しました:
最初はレイアウトするページ上の各 div に対してposition:Absolute を使用したため、body に height: 150% を設定しても div の高さには影響しません。ただし、この方法でレイアウトする場合、各 div の左と上を設定する必要があり、上の div を変更すると、それに応じて下のデータも変更されます。さらに問題なのは、左と上にパーセンテージを使用すると、ブラウザが拡大または縮小するときに要素の位置が非常に不安定になることです。

代わりに、一部の要素をフローティングし、一部の要素の余白を調整する方法を使用します。コンテンツがページを超えると、オーバーフローが設定されているかどうかに関係なく、ページに自動的にスクロール バーが追加されます。

ボディ自体がビジュアル領域の高さを超えるため、当然スクロールバーが表示されます

ボディ自体がビジュアル領域の高さを超えるため、当然、スクロールバーが表示されます
わかりました、ありがとうございます。