网络建站知识

精准传达 • 价值共享

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

网站建设 > 网站建设 > 网络建站知识

查看其它板块

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

作者：小诺 | 2020-02-04 23: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），也给它设置高度即可解决这个问题。

如没特殊注明，文章均为狐灵科技原创,转载请注明   "图片设置 height 高度 100%无效的解决方法
相关推荐
返回首页 了解更多建站资讯

—— 微信公众号 ——

热门标签

上一篇———————

网站建设中织梦提交表单不跳转到首页

下一篇———————

利用Css3filter(滤镜) 属性将图片变灰色鼠标放上去恢复变色
多一份免费策划方案，总有益处。

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

立即询问 技术总监在线 15523356218
网站设计 品牌营销

多一份参考，总有益处

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

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

业务热线：15082661954 / 大客户专线：15523356218

在线咨询 在线咨询 提交需求

关于狐灵科技

+

狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！

我们的优势

量身打造个性化网站制作

代码深度符合SEO优化

一站式企业网站建设服务

前沿视觉设计、研发能力

重庆网站建设公司

多项网站设计传播大奖

营销型网站建设专家

自主研发网站管理系统

B2C电商网站建设供应商

完善的售后服务体系

我们的不同

+

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！

友情链接 交换友情链接 交换友情链接 展开

公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1

专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图

业务咨询 业务咨询 业务热线 15082661954 提交需求 官方微信 狐灵网络科技官方微信