一个div自动充满当前屏幕的解决方法

Posted 七月的小小公园

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个div自动充满当前屏幕的解决方法相关的知识，希望对你有一定的参考价值。

方法一（先写一种呵呵呵）

html

<body>
    <div class="box1">
    </div>
</body>

 css

*{
      margin:0;
      padding:0;
 }
 body,html{
      height:100%;       
      padding:0;
      margin:0; 
      text-align: center;
      font-size:20px;
      font-family: Cambria, Cochin, Georgia, Times, \'Times New Roman\', serif
 }
.box1{
      height:100%;
      background: rgb(104, 204, 247);
 }

 

高度的100%是要相对上一级元素而言的，所以只对body设置100%是没用的，因为上层还有个html标签啊！！ 

 

以上是关于一个div自动充满当前屏幕的解决方法的主要内容，如果未能解决你的问题，请参考以下文章

HTML DIV充满整个屏幕

怎样使div充满全屏

如何让div的大小占满整个屏幕

我在iframe里写了<div>标签。宽度设的是100%,却不能充满整个屏幕。而且<div>标签外部的<body>宽度是100%.

DIV CSS 如何让网页中的某DIV自动适应屏幕高度自己变如下图

网页设计中怎么让一张图片填充满整个画面 ？