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. DJANGO_SETTINGS_MODULE is undefined报错的解决

    问题: ImportError: Settings cannot be imported, because environment variable DJANGO_SETTINGS_MODULE is ...

  2. mysql建表基本语法

    mysql添加约束的两种条件: ------表的内部添加(约束) 列名1 数据类型 (int) primary key auto_increment,---主键默认不能为空的 列名2 数据类型 not ...

  3. Linux shell编写端口扫描脚本

    Linux shell编写端口扫描脚本 需求: 扫描特定主机 扫描特定主机的特定端口 扫描特定网段 扫描特定网段中哪些主机开放了特定的端口 源码如下: #/bin/bash #该脚本用于对特定目标主机 ...

  4. python爬虫之天气预报网站--查看最近(15天)的天气信息(正则表达式)

    python爬虫之天气预报网站--查看最近(15天)的天气信息(正则表达式) 思路: 1.首先找到一个自己想要查看天气预报的网站,选择自己想查看的地方,查看天气(例:http://www.tianqi ...

  5. python中根据字符串导入模块module

    python中根据字符串导入模块module 需要导入importlib,使用其中的import_module方法 import importlib modname = 'datetime' date ...

  6. 持续代码质量管理-SonarQube-7.3部署

    Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等)不同,Sonar ...

  7. live555源码学习1---Socket流程架构图

    怎么说呢,换了工作环境,好多软件公司禁止使用了,有道笔记也无法使用了.发现博客园还可以上传图片,以后只能在这里记录了. 越发的感觉需要尽快把live555的代码拿下.因为工作环境问题,webrtc的源 ...

  8. LeetCode算法题-Fizz Buzz(Java实现)

    这是悦乐书的第221次更新,第233篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第88题(顺位题号是412). 编写一个程序,输出从1到n的数字的字符串表示.但对于三的 ...

  9. 完美集群监控组合ganglia和nagios

    Ganglia是伯克利开发的一个集群监控软件.可以监视和显示集群中的节点的各种状态信息,比如如:cpu .mem.硬盘利用率, I/O负载.网络流量情况等,同时可以将历史数据以曲线方式通过php页面呈 ...

  10. E. Superhero Battle Codeforces Round #547 (Div. 3) 思维题

    E. Superhero Battle time limit per test 2 seconds memory limit per test 256 megabytes input standard ...