> css教程 > css >

div设置为height:100%不起作用,无法占满整个屏幕的解决办法

来源:网络 文章列表 2019-01-09 8
本文通过设置html根元素和body元素的高度,实现div容器占满整个浏览器窗口。

假如我们想body里的div占满整个浏览器窗口,我们首先想到的是给div设置height:100%;宽度由于div是块元素,不需要设置就是100%的。于是我们有如下代码

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
   *{margin:0; padding: 0;}
   .mydiv{ height: 100%; background-color: #ccc; }
  </style>
</head>
<body>
  <div class="mydiv">
    占满整个浏览器窗口
  </div>
</body>
</html>

代码很简单。那么我们看下显示的效果如何呢?

显示效果:

 

我们选中div,会发现

div的高度确实只有文字高度那么高。

那么如果你细心的话,你会发现,body此时的高度,也只有文字块那么高。

那么我们自然想到,我给body也加个高度等于100%吧。

于是我们加上body{height: 100%}

测试发现

好像也没啥卵用

那怎么办呢,其实我们离真相已经很近了。我们发现,html跟元素的高度也是文字块那么高。

原来浏览器默认的body,和html是没有高度的。或者说高度是auto的。

那么接近办法就是给body和html都设置高度为100%就可以了吧。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
   *{margin:0; padding: 0;}
   html, body{ height: 100%; } /* 给html,body都设置高度100% */
   .mydiv{ height: 100%; background-color: #ccc; }
  </style>
</head>
<body>
  <div class="mydiv">
    占满整个浏览器窗口
  </div>
</body>
</html>

此时我们看效果:

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论