CSS使一个div充满屏幕的方法

在body只有一个div的时候,可以通过这样的方式让div撑满整个屏幕。

1. 给div设置定位。

复习一下——

 css中position有五种属性: 
      static:默认值,没有定位
      absolute:绝对定位,相对于父级元素进行定位
      relative:相对定位 
      fixed:固定定位,相对于浏览器窗口进行定位
      inherit:从父元素继承定位信息  

除了默认值static和inherit之外,添加其他三种都可以实现窗口自适应。
代码如下:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width:100%;
        height: 100%;
        background: yellow;
        position: absolute;
    }
</style>
<body>
<div></div>
</body>
  1. 通过设置html,body的宽高来让div充满屏幕
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    div{
        width:100%;
        height: 100%;
        background: yellow;
    }
</style>

<body>
<div></div>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,209评论 1 92
  • @转自GitHub 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?(1)有两种, IE 盒子模...
    YT_Zou阅读 1,389评论 0 1
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,862评论 1 19
  • 今天有个姑娘结婚了,还记得第一次遇见她时天空的颜色,是她报的西财我才跟着来的,那时很久神禾塬上的花儿只相识这一朵。...
    灞上刘少阅读 384评论 0 0
  • 我想,即使是很久很久以后,我也不会忘记,这些男孩给我带来的巨大的感动,不会忘记对他们数不清的心动。这是我青春中极其...
    独角鲸阅读 345评论 0 0

友情链接更多精彩内容