スクロールが発生する例

bodyにheight: 100vhをセットせずに、スクロールができるようにすることは可能です。height: 100vhを使用することで、bodyタグが画面全体の高さに固定されますが、これが不要な場合、bodyの高さをコンテンツの高さに応じて自動的に調整させることでスクロールを発生させることができます。

次のような変更を加えることで、height: 100vhを使わずにスクロールができる状態にできます。

修正後のコード例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message Example</title>
    <style>
        /* bodyタグの余白は変更せず */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            overflow-y: auto; /* 必要に応じてスクロールバーを表示 */
            /* height: 100vh を削除して、コンテンツの高さに応じたスクロール */
        }

        /* メッセージ部分の例 */
        .message-wrapper {
            margin-top: 10px;
            padding-top: 10px; /* 上に10pxの余白を追加 */
        }

        .message {
            background-color: lightgray;
            padding: 10px;
            margin-bottom: 20px;
            font-size: 16px;
            margin-top: 10px;
        }

        /* スクロールが発生する高さを持つコンテンツ */
        .scroll-content {
            height: 500px; /* 任意の高さ */
            background-color: lightblue;
        }

    </style>
</head>
<body>
    <div class="message-wrapper">
        <div class="message">メッセージで更新しました (Paddingで余白)</div>
    </div>
    <div class="scroll-content">
      あああ
    </div>
</body>
</html>

ポイント

  1. bodyタグにheightを指定しない:

    • height: 100vh;を使用しないことで、bodyの高さが画面全体に固定されず、コンテンツの高さに基づいてスクロールが発生します。これにより、コンテンツが画面の高さを超えた場合のみスクロールが発生します。

  2. overflow-y: auto;の使用:

    • overflow-y: auto;を指定することで、スクロールが必要な場合にのみスクロールバーが表示されます。これにより、スクロールバーが不要な場合には表示されず、必要な場合にのみ表示されるので、自然なスクロールの挙動を維持できます。

  3. コンテンツが長い場合にスクロールが発生する:

    • scroll-contentの高さや他の要素の高さに応じて、ページ全体がスクロール可能になります。スクロールバーはコンテンツが画面の高さを超えた場合にのみ表示されます。

期待される挙動

このコードでは、bodyの高さは画面全体に固定されず、ページのコンテンツに応じて動的にスクロールが発生します。scroll-contentの高さを指定しているため、この要素がbodyの高さを超えた場合にスクロールバーが表示されます。

ブラウザの大きさにより異なるのを回避

はい、ブラウザの現状の大きさ（ビューポートの高さ）を検知し、それに基づいて要素の高さを動的に設定することは可能です。これは、JavaScriptを使用してビューポートの高さを取得し、CSSの高さプロパティに反映させることで実現できます。

以下に、ビューポートの高さを取得して、ページのコンテンツや特定の要素にその高さをセットする方法を説明します。

JavaScriptを使用したビューポートの高さ設定例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Message Example</title>
    <style>
        /* bodyタグの余白は変更せず */
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            overflow-y: auto; /* 必要に応じてスクロールバーを表示 */
        }

        /* メッセージ部分の例 */
        .message-wrapper {
            padding: 10px;
            background-color: lightgray;
            margin-bottom: 20px;
        }

        /* 動的に高さが設定されるコンテンツ */
        .dynamic-content {
            background-color: lightblue;
            overflow-y: auto; /* 高さに応じてスクロールを発生させる */
        }
    </style>
</head>
<body>
    <div class="message-wrapper">
        <div class="message">メッセージで更新しました (Paddingで余白)</div>
    </div>
    <div class="dynamic-content">
        ああああああああああああああああ
    </div>

    <script>
        // ビューポートの高さを取得し、要素にセット
        function adjustHeight() {
            var viewportHeight = window.innerHeight; // ビューポートの高さを取得
            var messageHeight = document.querySelector('.message-wrapper').offsetHeight; // メッセージ部分の高さを取得

            // 動的に高さを設定するコンテンツの高さを計算
            var dynamicContent = document.querySelector('.dynamic-content');
            dynamicContent.style.height = (viewportHeight - messageHeight) + 'px'; // 残りの高さを設定
        }

        // ページロード時に高さをセット
        window.onload = adjustHeight;

        // ウィンドウリサイズ時にも高さを再設定
        window.onresize = adjustHeight;
    </script>
</body>
</html>

説明

  1. window.innerHeightでビューポートの高さを取得:

    • window.innerHeightは、ブラウザの現在のビューポートの高さ（表示されているウィンドウの高さ）をピクセル単位で取得します。

  2. メッセージ部分の高さを計算:

    • document.querySelector('.message-wrapper').offsetHeightを使用して、メッセージ部分の実際の高さを取得しています。これにより、スクロール可能なコンテンツに割り当てられる残りの高さを計算します。

  3. 動的なコンテンツの高さを設定:

    • メッセージ部分の高さを引いた残りの高さを.dynamic-content要素に設定し、ビューポート内に収まるようにしています。これにより、スクロールが必要な場合にはその要素のみスクロール可能になります。

  4. ウィンドウサイズ変更時の再調整:

    • window.onresizeを使用して、ブラウザのサイズが変更されたときに高さを再計算し、dynamic-contentの高さがビューポートに常に収まるようにしています。

期待される動作

  • ページが読み込まれると、message-wrapperの高さを差し引いた残りの高さが、dynamic-contentに設定されます。
  • ブラウザのウィンドウをリサイズすると、動的に高さが再計算され、常にビューポートの高さに収まるように調整されます。

これで、ブラウザの現状の大きさに基づいて高さを調整し、スクロールが発生しないように調整できます。