Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。

例如：

  <style>

    .container{

      width: 100%;

      height: 100%;

      background: gold;

    }

  </style>

<body>

  <div class="container"></div>

</body>

如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。

现在现在你给了这个div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度 ！！！

  <style>

    body,html{

      width: 100%;

      height: 100%;

    }

    .container{

      width: 100%;

      height: 100%;

      background: gold;

    }

  </style>

<body>

  <div class="container"></div>

</body>

html设置 hight100%问题的更多相关文章

  1. Linux命令总结大全，包含所有linux命令

    使用说明:此文档包含所有的Linux命令,只有你想不到的没有你看不到的,此文档共计10万余字,有8400多行,预计阅读时间差不多需要3个小时左右,所以要给大家说一说如何阅读此文档 为了方便大家阅读,我 ...

  2. 【.net 深呼吸】设置序列化中的最大数据量

    欢迎收看本期的<老周吹牛>节目,由于剧组严重缺钱,故本节目无视频无声音.好,先看下面一个类声明. [DataContract] public class DemoObject { [Dat ...

  3. LINUX篇，设置MYSQL远程访问实用版

    每次设置root和远程访问都容易出现问题, 总结了个通用方法, 关键在于实用 step1: # mysql -u root mysql mysql> Grant all privileges o ...

  4. Visual Studio Code 代理设置

    Visual Studio Code (简称 VS Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器,在十多年的编程经历中,我使用过非常多的的代码编辑器(包括 IDE),例如 Fron ...

  5. myeclipse学习总结一（在MyEclipse中设置生成jsp页面时默认编码为utf-8编码）

    1.每次我们在MyEclispe中创建Jsp页面,生成的Jsp页面的默认编码是"ISO-8859-1".在这种情况下,当我们在页面中编写的内容存在中文的时候,就无法进行保存.如下图 ...

  6. Linux scp 设置nohup后台运行

    Linux scp 设置nohup后台运行 1.正常执行scp命令 2.输入ctrl + z 暂停任务 3.bg将其放入后台 4.disown -h 将这个作业忽略HUP信号 5.测试会话中断,任务继 ...

  7. 6.DNS公司PC访问外网的设置 + 主DNS服务器和辅助DNS服务器的配置

    网站部署之~Windows Server | 本地部署 http://www.cnblogs.com/dunitian/p/4822808.html#iis DNS服务器部署不清楚的可以看上一篇:ht ...

  8. PowerDesigner-VBSrcipt-自动设置主键，外键名等(SQL Server)

    在PowerDesigner中的设计SQL Server 数据表时,要求通过vbScript脚本实现下面的功能: 主键:pk_TableName 外键:fk_TableName_ForeignKeyC ...

  9. 实现代理设置proxy

    用户在哪些情况下是需要设置网络代理呢? 1. 内网上不了外网,需要连接能上外网的内网电脑做代理,就能上外网:多个电脑共享上外网,就要用代理: 2.有些网页被封,通过国外的代理就能看到这被封的网站:3. ...

随机推荐

  1. 如何定位那些SQL产生了大量的redo日志

    在ORACLE数据库的管理.维护过程中,偶尔会遇到归档日志暴增的情况,也就是说一些SQL语句产生了大量的redo log,那么如何跟踪.定位哪些SQL语句生成了大量的redo log日志呢? 下面这篇 ...

  2. SQL Server死锁的解决过程

    某现场报一个SQL死锁,于是开启了1222跟踪: dbcc traceon(1222,-1) 一段时间之后拷贝ERROR文件查找相关信息,比较有用的摘录出来如下: 语句一: select study_ ...

  3. ELF文件的加载过程(load_elf_binary函数详解)--Linux进程的管理与调度（十三）

    加载和动态链接 从编译/链接和运行的角度看,应用程序和库程序的连接有两种方式. 一种是固定的.静态的连接,就是把需要用到的库函数的目标代码(二进制)代码从程序库中抽取出来,链接进应用软件的目标映像中: ...

  4. python——虚拟环境之pipenv的安装及使用(windows10,64位)

    1 简介 pipenv是requests作者的一个项目,整合了virtualenv.pip.pipfile, 用于更方便地为项目建立虚拟环境并管理虚拟环境中的第三方模块.不需要再分别使用pip和vir ...

  5. JavaScript -- 时光流逝（八）：js中的事件Event的使用

    JavaScript -- 知识点回顾篇(八):js中的事件Event的使用 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. (1) onabort : onabort 事件会在图像 ...

  6. kafka_2.11-2.0.0_安装部署

    参考博文:kafka 配置文件参数详解 参考博文:Kafka[第一篇]Kafka集群搭建 参考博文:如何为Kafka集群选择合适的Partitions数量 参考博文:Kafka Server.prop ...

  7. 使用Vuex心得

    之前一直都是看别人写的vuex感觉还挺好理解的,今天自己根据需求写了下vuex,一下子不知道怎么写了, 想要用好vuex还是先要知道原理: 参考好博客写的非常到位:https://www.cnblog ...

  8. [matlab] 7.快速搜索随机树（RRT---Rapidly-exploring Random Trees) 路径规划

    RRT是一种多维空间中有效率的规划方法.它以一个初始点作为根节点,通过随机采样增加叶子节点的方式,生成一个随机扩展树,当随机树中的叶子节点包含了目标点或进入了目标区域,便可以在随机树中找到一条由从初始 ...

  9. Python：Day35 mysql基础

    一.数据库管理系统DBMS 软件,存储数据 认证,授权,限制 SqlServer --- 微软(收费) Oracle,sqlite,access...MySQL 服务端和客户端 想要使用MySQL来存 ...

  10. 【angularJS】过滤器

    1.分类: <1>内置过滤器(见4) <2>自定义过滤器 2.作用:接收一个输入,通过某个规则进行处理,然后返回处理后的结果 3.应用: <1>在模板中使用 用法 ...