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

本文介绍了两种实现网页全屏显示的方法:一是通过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;
    }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值