HTML中设置背景自适应填满一屏

最新推荐文章于 2025-06-27 19:45:56 发布

原创最新推荐文章于 2025-06-27 19:45:56 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了两种实现网页全屏显示的方法：一是通过CSS定位技术，二是利用Flex布局。定位技术适用于所有浏览器，而Flex布局则更适合现代浏览器（IE10及以上）。通过这两种方法可以轻松实现页面元素填充整个屏幕的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置屏幕撑满一个屏幕

方式一、使用定位

<!-- HTMl  -->
    <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布局（IE10+）

<!-- HTML -->
    <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;
    }