通常我们需要让自己的网页内容能够更好的适配各种屏幕大小，会采用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. "Hello World!"团队第十次会议

    Scrum会议 今天是我们"Hello World!"团队第十次召开会议,博客内容是: 1.会议时间 2.会议成员 3.会议地点 4.会议内容 5.todo list 6.会议照片 ...

  2. c# 捕获一般获取不到的异常

    1.主函数入口加异常事件,代码例如: /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static void M ...

  3. HttpWebRequest下载文件，乱码问题解决方案

    写在前面 今天之所以会总结HttpWebRequest下载文件,主要是因为在使用该类下载文件的时候,有些地方需要注意一下,在实际的项目中遇到过这种问题,觉得还是有必要总结一下的.在下载文件时,最常见的 ...

  4. Java package

    Java中的一个包就是一个类库单元,包内包含有一组类,它们在单一的名称空间之下被组织在了一起.这个名称空间就是包名.可以使用import关键字来导入一个包.例如使用import java.util.* ...

  5. 升级Xcode之后VVDocumenter-Xcode不能用的解决办法

    VVDocumenter-Xcode上一款快速添加标准注释,并可以自动生成文档的插件.有了VVDocumenter-Xcode Objective-C效果图: Swift效果图:从UUID证书从而保证 ...

  6. TCP系列46—拥塞控制—9、SACK下的快速恢复与Limited transmit

    一.概述 1.SACK下的特殊处理过程 SACK下的拥塞控制处理是linux中拥塞控制的实现依据,再次强调一遍RFC6675的重要性,linux中拥塞控制主体框架的实现是与RFC6675一致的,所以如 ...

  7. CKeditor、CKFinder的安装配置

    CKEditor是不集成文件上传与管理功能的,文件上传管理功能被集成在CKFinder中,这是一个收费的商业软件. 如需要文件上传与管理功能建议使用FCKeditor或者手动破解CKFinder. 下 ...

  8. Fn+F1-F12，避免使用FN+

    用惯了win8.1,再用win10 很不习惯使用FN+F1-F12 如果要避免使用FN+:使用[FN+ESC]

  9. Java容器深入浅出之Collection与Iterator接口

    Java中用于保存对象的容器,除了数组,就是Collection和Map接口下的容器实现类了,包括用于迭代容器中对象的Iterator接口,构成了Java数据结构主体的集合体系.其中包括: 1. Co ...

  10. 教你配置使用阿里云 Maven 库，体验秒下 jar 包的快感

    鉴于国内的网络环境,从默认 Maven 库下载 jar 包是非常的痛苦. 速度慢就不说了,还经常是下不下来,然后一运行就是各种 ClassNotFoundException,然后你得找到残留文件删掉重 ...