css方法让div撑满整个屏幕

最新推荐文章于 2024-04-20 18:01:19 发布

转载最新推荐文章于 2024-04-20 18:01:19 发布 · 1.4k 阅读

收录于

Java

当前文章被收录于：

Java

0 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文分享了使单一div元素充满整个屏幕的两种CSS方法，一种利用position:absolute属性，另一种通过设置html和body的宽高为100%。这两种方法均可实现窗口自适应效果。

学习网上经验记录下来：
在body只有一个div的时候让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>

或

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        div{
            width:100%;
            height: 100%;
            background: yellow;
        }
</style>

<body>
<div></div>
</body>