网络建站知识

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

图片设置 height 高度 100%无效的解决方法

作者:小诺 | 2020-02-04 15:05 |点击:

1、问题的发现:div设置height高度为100%却未生效


  1. <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .contentDiv {
                width: 100%;
                height: 100%;
                background-color: #cccccc;
            }
        </style>
    </head>
    <body>
        <div class="contentDiv"></div>
    </body>
     


查看上面的代码,结构很简单,一个div,宽度和高度都设置100%,背景颜色设置了#ccc。

此时想象一下在浏览器中应该显示一个背景颜色为灰色的全屏的div,但是,结果并不是这样,反而,此时div的高度是0!!!
 

2、问题的解决:

需要给html和body设置高度为100%,此时div设置高度100%才生效,代码如下
 

  1. <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        ......
    </style>
     

3、问题的原因:

给div设置高度为100%时,是相对于父节点(此时div的父节点是body)设置的,如果此时只设置body的高度为100%,结果发现body高度还是0!!!所以此时再要找到body的父节点(也就是html),也给它设置高度即可解决这个问题。

多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:023-68168040 / 大客户专线:15523356218