通常我们需要让自己的网页内容能够更好的适配各种屏幕大小，会采用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. php的大小写敏感问题整理

    php的大小写敏感问题整理 今天在开发php的过程中,因为命名大小写的问题导致代码错误,所以从网上整理了php的大小写敏感的一些资料,需要的朋友可以参考下.   PHP对大小写敏感问题的处理比较乱,写 ...

  2. “Hello World！”团队召开的第六次会议

    团队“Hello World!”团队召开的第六次会议. 博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.Todo List 六.会议照片 七.燃尽图 一.会议时间 2017年1 ...

  3. AOP：Spring的xml配置方式

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. 四则运算2+psp0

    程序要求: 1.题目避免重复 2.可定制(数量\打印方式) 3.可以一下控制参数 ① 是否有乘除法 ② 是否有括号(最多支持十个数参与运算) ③ 数值范围 ④加减有无负数 ⑤除法有无余数 分析:① 如 ...

  5. ASP.NET MVC5 学习系列之视图

    一.视图约定 当创建一个项目模版时,可以注意到,项目以一种非常具体的方式包含了一个结构化的Views目录.在每一个控制器的View文件夹中,每一个操作方法都有一个同名的视图文件与其对应.(约定大于配置 ...

  6. A10

    今日内容: 完善界面.解决剩下的一些问题 明日计划: 无 困难: 无

  7. 《剑指offer》---左旋转字符串与右旋转字符串

    本文算法使用python3实现 1. 问题1 1.1 题目描述:   汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S, ...

  8. laravel5.6 调用第三方类库

    大概流程: 1. 新建一个目录方类库 2. 配置composer配置文件 3. 在项目中使用终端运行composer  dumpautoload 4. 使用时 方法调用可以new对象后->方法名 ...

  9. libmnl

    https://www.netfilter.org/projects/libmnl/doxygen/modules.html 1,tar xvf libmnl-1.0.4.tar.gz 2,cd li ...

  10. elasticsearch6 学习之批量操作

    环境:elasticsearch6.1.2        kibana6.1.2  一.mget批量查询 mget可以将多个请求才能获的数据,合并到一个请求中以节省网络开销. 1.查询同一个索引下,通 ...