通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用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. 移动端rem用法总结

    先介绍一下这个近年来突起的黑马 CSS3中新增的属性,从IE9开始兼容,手机端都兼容.参考的是<html>这个标签的font-size.rem中的r就是root根的意思.所以rem要比em ...

  2. es6 babel编译

    本文主要参照阮一峰的es6入门,为提高自己写了一份随笔. 原文地址请戳这里  ECMAScript 6 入门 ECMAScript 6是JavaScript语言的下一代标准.因为当前版本的ES6是在2 ...

  3. 0421--"数字口袋精灵app"二次开发(Blackbriar团队开发)

    "数字口袋精灵app"二次开发 目录: 一.项目github总仓库推送 二.开发成员 三.分工与合作 四.各模块成果 五.心得墙 六.团队成员贡献分 内容: 一.项目github总 ...

  4. Android数据储存之SQLiteDatabase 简单增删改查

    SQLiteDatabase 使用 SQLiteDatabase提供如下方法来打开一个文件对应的数据库: openDatabase(String path, SQLiteDatabase.Cursor ...

  5. ASP.NET 文档

    标题:ASP.NET 文档 地址:https://docs.microsoft.com/zh-cn/aspnet/index#pivot=core&panel=core_overview 标题 ...

  6. Java实现的词频统计

    要求: 1.读取文件: 2.记录出现的词汇及出现频率: 3.按照频率降序排列: 4.输出结果. 概要: 1.读取的文件路径是默认的,为了方便调试,将要统计的文章.段落复制到文本中即可:2.只支持英文: ...

  7. jetty之maven配置

    <!-- jetty 插件配置 --><plugin> <groupId>org.mortbay.jetty</groupId> <artifac ...

  8. [CB] Windows10为什么质量变差 bug越来越多

    在 Windows 10 发布之后,微软转向了软件即服务模式,每半年释出一个新版本,通过增加更新频率将新的特性不断推送给用户. 在以前,微软产品发布周期是两到三年,其开发流程分成多个阶段:设计和策划. ...

  9. Linux服务器开启tomcat的gc日志

    压力测试,为了能监控长期对gc的变化的情况,那么就需要在tomcat中进行配置相关的gc输入日志,以便后续来对gc中进行分析 工具 :linux+tomcat 1.进入到了tomcat的bin的目录下 ...

  10. React.js学习笔记(一):组件协同与mixin

    组件协同: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...