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%;
          position: absolute;
      }

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

2.通过将html设为高度百分百

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

</style>
<body>
     <div></div>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在body只有一个div的时候,可以通过这样的方式让div撑满整个屏幕。 1. 给div设置定位。 复习一下—— ...
    Joe_Somebody阅读 13,179评论 0 0
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,346评论 0 5
  • "display"属性 display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 displa...
    PYFang阅读 2,540评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,698评论 32 459
  • 对于我们一些小白同学来说,排版的时候面对css里面的position属性的时候会不会头痛不知道用哪个然后随便选一个...
    繁络阅读 4,549评论 0 17