通常我们需要让自己的网页内容能够更好的适配各种屏幕大小，会采用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. <力荐>非常好的正则表达式的详解<力荐>

    正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 列目录时, dir *.t ...

  2. 关于requestanimationframe

    首先字面理解,请求动画框架, 用法: var nextFrame = (function() { return window.requestAnimationFrame || window.webki ...

  3. RIGHT-BICEP测试第二次程序

    根据Right-BICEP单元测试的方法我对我写的第二次程序进行了测试: 测试一:测试能否控制使用乘除 测试二:测试是否能加括号 测试三:是否可以控制题目输出数量 测试四:能否控制输出方式,选择文件输 ...

  4. 团队作业——王者光耀：team

    光耀101  <光耀101>是福州大学数计学院计算机专业推出的中国首部程序猿脱发养成节目.由张栋担任发起人,刘晨瑶.畅畅担任导师.  该节目召集了你猜多少位选手,通过任务.训练.考核,让选 ...

  5. lintcode-411-格雷编码

    411-格雷编码 格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个二进制的差异. 给定一个非负整数 n ,表示该代码中所有二进制的总数,请找出其格雷编码顺序.一个格雷编码顺序必须以 0 ...

  6. Week2-作业1 -阅读《构建之法》

    第一章 在阅读第1.2.2节时,感受最深,记得开学初有老师就给我们分析过计算机专业和我们专业的区别,当时是给我们讲的是计算机科学注重的是理论,偏向于硬件方面,而软件工程则注重实践,偏向于软件方面.然很 ...

  7. Web-JSP表单字符验证

    代码后续补上

  8. 西南大学校园网客户端共享网络之路由器开wifi

    1年前出了NetKeeper,让寝室只能一个人用一个账号,而且,在寝室平板手机什么的只能靠360wifi什么的来维持了,电脑一直不能关,确实让人不爽. 最近学校又出台了swu-wifi-dorm来让寝 ...

  9. Javascript中判断变量是数组还是对象(array还是object)

    怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...

  10. java 常量 jvm在编译期能确定常量的 所以相等 但不能确定变量的范围 所以变量相加会产生新的