铺满全屏的div

秒速五厘米 2021-12-17 05:21 310阅读 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 条评论，310人围观）

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

相关阅读

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

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

相关 SurfaceView全屏铺满的方法

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

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

相关 CSS--高度铺满

原文网址：[CSS--高度铺满\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN] 其他网址 [div 自适应高度自动填充剩余高度 - 庞国明 -

迷南。/ 2022年09月02日 05:21/ 0 赞/ 178 阅读

相关 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 赞/ 186 阅读

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

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

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

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

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

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

相关 div的全屏与退出全屏

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

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

相关 Dialog 宽度占满全屏

转载自：[https://blog.csdn.net/sydmobile/article/details/83588708][https_blog.csdn.net_sydmo

骑猪看日落/ 2022年03月18日 06:35/ 0 赞/ 336 阅读

相关铺满全屏的div

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

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

相关背景图铺满全屏

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

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