铺满全屏的div

秒速五厘米 2021-12-17 05:21 345阅读 0赞

继承法

<style>
      * {
            margin:0;
            padding:0;
        }
           html,body{
               height:100%;
           }
           .box{
               height:100%;
               background-color:blue;
           }
    </style>
    
    <div class="box"></div>

position定位法 1

* {
                margin:0;
                padding:0;
            }
            .box{
                position:absolute;
                width:100%; 
                height:100%;
                background-color:blue;
            }
            /* 定位之后元素会缩放至内容得大小 ,即由内容撑开，所以必须设置
                width:100%; 
                height:100%;
            */
    </style>
    
    
    <div class="box"></div>

定位法 2

<style>
         * {
               margin:0;
               padding:0;
         }
        .box{
               position:absolute;
               top:0;
               bottom:0;
               left:0;
               right: 0;
               background-color:red;
        }
    </style>
    
    <div class="box"></div>

发表评论取消回复

表情：

评论列表（有 0 条评论，345人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-cli 中为单独页面设置背景图片铺满全屏的方法

<template> <div id="logo"> </div> </template> <script>

「爱情、让人受尽委屈。」/ 2023年03月13日 03:40/ 0 赞/ 19 阅读

相关如何让 div 铺满整个屏幕

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

以你之姓@/ 2023年02月23日 08:51/ 0 赞/ 289 阅读

相关 CSS 背景及铺满当前div的小技巧

CSS 背景属性 <table> <tbody> <tr> <th>属性</th> <th>描述</th> </tr> <tr>

绝地灬酷狼/ 2023年02月08日 12:55/ 0 赞/ 30 阅读

相关 SurfaceView全屏铺满的方法

SurfaceView用来播放视频时，父view设定了固定高度，那全屏时不同的设备，有的设备可能就出现白边，无法铺满。如 <RelativeLayout

拼搏现实的明天。/ 2022年12月20日 02:25/ 0 赞/ 283 阅读

相关 CSS背景铺满全屏

html { background: url(images/bg.png) no-repeat center center fixed; -webkit-backgro

Love The Way You Lie/ 2022年08月18日 11:41/ 0 赞/ 214 阅读

相关 css中让图片铺满整个div盒子

盒子是middle middle{ border: 1px solid blue; position: absolute;

淩亂°似流年/ 2022年05月14日 02:12/ 0 赞/ 802 阅读

相关设置ImageView显示的图片铺满全屏

为适应不同屏幕的手机，ImageView显示的图片可能不铺满屏幕，如果定高的话，两边可能会出现空白。魅族手机就会有这种情况，在其他手机里显示正常，在魅族手机里显示，图片左右两

本是古典何须时尚/ 2022年05月09日 12:42/ 0 赞/ 1181 阅读

相关 div的全屏与退出全屏

html按钮： <button onclick="showFull();">全屏</button> <button onclick="delFull();

淡淡的烟草味﹌/ 2022年03月28日 12:48/ 0 赞/ 390 阅读

相关铺满全屏的div

继承法 <style> { margin:0; padding:0; }

秒速五厘米/ 2021年12月17日 05:21/ 0 赞/ 346 阅读

相关背景图铺满全屏

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

桃扇骨/ 2021年11月17日 11:22/ 0 赞/ 394 阅读