通常我们需要让自己的网页内容能够更好的适配各种屏幕大小，会采用height：100%，但是我们发现问题出来了，height：100%无效，其实解决办法很简单

解决：你只需要在css处添加上html, body{ margin:0; height:100%; }即可。
原因：你让div的height="100%"，执行网页时，css先执行到，而整个网页中的内容还没有完全载入，是获取不到div外面的<body>等的高度的，所以height="100%"也就不能如愿显示了。加上 body{height:100%} 就轻松解决啦，一开始就让body以100%显示，他的下级div自然就100%的，对于部分浏览器还需html,body{height:100%}
 
总结： 最好添加上 html,body{height:100%}

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style type="text/css">

    *{

        margin: ;

        padding: ;

    }

    html, body{

        height: %;

    }

    .sys_content{

        width: %;

        height: %; /* 不设置html,body{height: 100%} 是，该height为0 */

        background-color: #c1cdcd;

    }

</style>

<body>

    <div class="sys_content">

        <div id="canvas"></div>

    </div>

</body>

</html>

示例说明

解决html设置height：100%无效的问题的更多相关文章

  1. 解决body设置height:100%无效问题

    1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...

  2. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  3. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  4. html中设置height=100%无效的问题

    设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素   height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...

  5. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  6. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  7. [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  8. css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  9. 解决BootstrapTable设置height属性后，表格不对齐的问题

    解决BootstrapTable设置height属性后,表格不对齐的问题 2018年03月06日 09:56:54 nb7474 阅读数 5920     一般在使用BootstrapTable 插件 ...

随机推荐

  1. Python3 函数式编程自带函数

    一 map函数 引子 需求1:num1=[1,2,3,4],我的需求是把num1中的每个元素平方后组成新列表. ret = [] num1 = [1,2,3,4] for i in num1: ret ...

  2. int 和 Integer的区别

    int是基本类型,默认值为0,int a=5;a只能用来计算,一般作为数值参数. Integer是引用类型,默认值为null, Integer b=5;b是一个对象,它可以有很多方法,一般做数值转换, ...

  3. AOP:jdk的动态代理

    1.文件结构 2.建立接口 package com.wangcf.manager; public interface IUserManager { public void add(); public ...

  4. 未能加载文件或程序集 system.Web.Http.WebHost解决办法。

    在csdn中找到一个方法: Update-Package Microsoft.AspNet.WebApi -reinstall 然后就好了. 另外一个方法是缺少哪个dll,就复制一个dll放到bin文 ...

  5. fastjson&gson

    1.model转fastjson时,model成员变量是对象的,再转成fastjson时,不能仅仅判断key是否存在.应该判断其值是否为"". 2.gson 在 dao层貌似没有用 ...

  6. [mysqld_safe]centos7 mysql 安装与配置

    查资料发现是CentOS 7 版本将MySQL数据库软件从默认的程序列表中移除,用mariadb代替了. 有两种解决办法: 安装mariadb [root@a ~]#  yum install mar ...

  7. 对IT行业的一些思考

          阅读完两篇报道,从“2014年十大最热门行业和职业排行榜”可以看出最热门的行业是IT行业,可以看出IT行业在未来的发展前景很乐观,选择IT行业的人也会越来越多,IT行业也会越来越庞大.但是 ...

  8. Markdown语法实践

    Markdown语法实践 Markdown基本语法 1.标题 # 一级标题 ## 二级标题 ### 三级标题 eg: 一级标题 二级标题 三级标题 2.链接 标准: [Title](URL) 实例: ...

  9. google auth

    思路: secret 系统生成的密钥 把密钥分配给某个用户,用户可以把这个密钥加入到app中,app会1min生成一个code: 验证时,根据用户的 secret ,系统生成一个code,再比较用户输 ...

  10. js & array to string

    js & array to string https://stackoverflow.com/questions/13272406/convert-string-with-commas-to- ...