HTMLで背景適応を設定して画面を埋め尽くす

6526 ワード
CSS

スクリーンをいっぱいにする

  • 方式一、使用位置決め
    • 
    <body>
        <div class="background">div>
    body>

    /* CSS */
    body{
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        background: #fff;
        color: #fff;
        /*             ，              */
    }
    .background{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /*        ，          ，          */
        background: url('./Tuscany_Italy_1.jpg') no-repeat;
        z-index: 1;
    }
  • 方式2、flexレイアウト(IE 10+)
    • を使用
    
    <body>
        <div class="div1">
            <div class="div2">div>
        div>
    body>

    /* CSS */
    .div1 {
        display: flex;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #0f0;
        align-items: stretch;
    }

    .div2 {
         /*     1   */
        flex-grow: 1;
        align-items: stretch;
        background: #f00;
    }
    CSS、3種類のスタイルの使用
    Aspを非同期で呼び出す.Netユーザーコントロール