オーバーフロー-xオーバーフロー-yは?

22165 ワード

背景

オーバーフロー属性は、要素のボックスの内容が長い場合にどのように表示されるかを選択する属性です.overflowアトリビュートを使用して、水平軸または垂直軸のみのスクロールバーを作成する方法overflow-xとoverflow-yプロパティを直接使用すればいいです.

overflow-x, overflow-y

overflow-xプロパティは、左と右のコンテンツが長い場合(横方向)にどのように表示されるかを選択するx軸を選択するプロパティ

です.

overflow-yプロパティは、上下のコンテンツが長い場合(垂直)にどのように表示されるかを選択するプロパティ

のy軸です.

overflow-xデフォルトプロパティ

visible(デフォルト):特定の要素がボックスを超えても表示されます.

hidden:親要素の範囲外の子要素の部分を非表示にする処理を行います.(水平スクロールバーは表示しないがブラウザに垂直スクロールバーを表示する)

スクロール:親要素の範囲外のサブ要素部分は表示されませんが、ユーザーが表示できるようにスクロールバーが表示されます.(常に水平スクロールバーを表示)

auto:親要素の範囲を超えた子要素の部分がある場合は、それを表示しないように処理し、スクロールバーを表示して、ユーザーがこの部分を表示できるようにします.(コンテンツがオーバーフローする場合のみ水平スクロールバーが表示される)

オーバーフロー-x例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 400px;
            height: 110px;
            margin: 0 0 50px 0;
        }

        div#a {
            overflow-x: visible;
            background: #EBDEF0;

        }

        div#b {
            overflow-x: hidden;
            background: #F2D7D5;
        }

        div#c {
            overflow-x: scroll;
            background: #E5E8E8;
        }

        div#d {
            overflow-x: auto;
            background: #D3EBDF;
        }
    </style>
</head>

<body>
    <div id="a">
        <h2>1. overflow-x : visible</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="b">
        <h2>2. overflow-x : hidden</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="c">
        <h2>3. overflow-x : scroll</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="d">
        <h2>4. overflow-x : auto</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>
</body>

</html>

overflow-yデフォルトプロパティ

visible(デフォルト):特定の要素がボックスを超えても表示されます.

hidden:親要素の範囲外の子要素の部分を非表示にする処理を行います.(垂直スクロールバーは表示されませんが、ブラウザに従って水平スクロールバーが表示されます)

スクロール:親要素の範囲外のサブ要素部分は表示されませんが、ユーザーが表示できるようにスクロールバーが表示されます.(常に垂直スクロールバーを表示)

auto:親要素の範囲を超えた子要素の部分がある場合は、それを表示しないように処理し、スクロールバーを表示して、ユーザーがこの部分を表示できるようにします.(コンテンツオーバーフロー時のみ垂直スクロールバーを表示)

オーバーフロー-yの例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 400px;
            height: 110px;
            margin: 0 0 50px 0;
        }

        div#a {
            overflow-y: visible;
            background: #EBDEF0;

        }

        div#b {
            overflow-y: hidden;
            background: #F2D7D5;
        }

        div#c {
            overflow-y: scroll;
            background: #E5E8E8;
        }

        div#d {
            overflow-y: auto;
            background: #D3EBDF;
        }
    </style>
</head>

<body>
    <div id="a">
        <h2>1. overflow-y : visible</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="b">
        <h2>2. overflow-y : hidden</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="c">
        <h2>3. overflow-y : scroll</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>

    <div id="d">
        <h2>4. overflow-y : auto</h2>
        All my troubles seemed so far away
        Now it looks as though they're here to stay
        Oh, I believe in yesterday
        Suddenly
        I'm not half the man I used to be
        There's a shadow hanging over me
        Oh, yesterday came suddenly
    </div>
</body>

</html>

https://electronic-moongchi.tistory.com/62#

Reference

この問題について(オーバーフロー-xオーバーフロー-yは?), 我々は、より多くの情報をここで見つけました https://velog.io/@leyuri/CSS-overflow-x-overflow-y-란

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Blog with Django (Codemy.com) - 33 Comment Section

複数選択ボタンの操作