问题：在HTML页面中声明，页面中div属性设置100%页面显示不正常



body {

       max-width: 720px;

       margin: 0 auto;

     }

.case {

       background-color: #68CDD5;

       height: 100%;

     }

页面中case为最大的div的class，设置了height:100%，页面并未正常显示，蓝色部分并未铺满整个页面。

原因：在HTML5标准要求高度或宽度设置成百分比时，参照的是父标签。

解决：

标签的父标签是，标签的高度也需要定义，很多人以为这样设置后也可以正常显示，然而并不是，因为标签的高度虽然设置成100%了，但**标签父标签是标签**，这个标签也是需要定义高度的。所以最终要添加的参数是html,body {height:100%;}。
html和body之间是逗号，不是空格。说明这是一个多标签选择器，不是派生选择器。
```
html,body {
max-width: 720px;
margin: 0 auto;
height: 100%;
}
.case {
background-color: #68CDD5;
height: 100%;
}
```
正常的页面显示如下
![image.png](https://upload-images.jianshu.io/upload_images/6932056-a984e8a6a4ad968d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

<!DOCTYPE html>声明下div高度100%的更多相关文章

  1. html div高度100%无效

    移动端相关: div高度继承自父元素——>body——>html 解决方案: html,body { height: 100%;margin: 0; padding: 0;} 然后对应的d ...

  2. 如何设置div高度为100%

    div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...

  3. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  4. IE下div使用margin:0px auto不居中的原因

    IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用, ...

  5. Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  6. 转载：IE下div使用margin:0px auto不居中的原因

    转自:http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html 一般在将div居中显示时,使用css: divX {margin:0  ...

  7. 父div高度不能根据子div高度自动变化的解决方案

    <div id="parent"> <div id="content"> </div> </div> 当cont ...

  8. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  9. 子元素div高度不确定时父div高度如何自适应

    粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...

随机推荐

  1. 《Python绝技：运用Python成为顶级黑客》 用Python进行渗透测试

    1.编写一个端口扫描器 TCP全连接扫描.抓取应用的Banner #!/usr/bin/python #coding=utf-8 import optparse import socket from ...

  2. python django 更改模型字段出错时的一个解决办法

    python/django 框架自带的 orm 无疑是django框架最拿得出手的一个亮点,orm无疑极大的方便了项目的开发,提高了开发的效率. 在实际的项目开发过程中,我们有时候需要修改模型的字段, ...

  3. jzoj5843

    给定 n 个正整数序列 ,每个序列长度为m. 选择至少 1 个序列,在每个被选择的序列中选择一个元素,求出所有被选择的元素的 gcd. 求所有方案的结果之和,答案对 1e9+7 取模.两种方案不同,当 ...

  4. 使用PhpSpreadsheet将Excel导入到MySQL数据库

    本文以导入学生成绩表为例,给大家讲解使用PhpSpreadsheet将Excel导入的MySQL数据库. 准备 首先我们需要准备一张MySQL表,表名t_student,表结构如下: CREATE T ...

  5. C# MVC 与Java MVC

    C# MVC与Java MVC都是三层结构:Controller.View.Model,基本上没有什么区别. 但是C# MVC有很多的变形模式: 上图所示就是C#里面MVC变向模型,里面包含BLL.C ...

  6. JDBC连接数据库7个步骤

    JDBC连接数据库    •创建一个以JDBC连接数据库的程序,包含7个步骤:    1.JDBC所需的四个参数(user,password,url,driverClass) (1)user用户名 ( ...

  7. servlet转发与重定向区别

    servlet转发与重定向   HttpServletRequest: 表示浏览器向服务器发送的请求报文,由Tomcat创建然后作为参数传递给我们doget,dopost方法. 功能:getParam ...

  8. python3 + zabbix api 的使用

    喜欢需要理由吗?需要吗?当然需要,zabbix的那么多功能足以让你喜欢她,现在还有zabbix API,zabbix真让我疯了,太牛逼了,太让人喜欢了.有zabbix API我们可以做很多,自己开发w ...

  9. (转)mysql自增列导致主键重复问题分析

    mysql自增列导致主键重复问题分析...  原文:http://www.cnblogs.com/cchust/p/3914935.html 前几天开发童鞋反馈一个利用load data infile ...

  10. 如何安装windows7

    前因:之前安装的win7的系统,用了激活工具,刚开始的几个星期还没察觉有何问题.直到有天系统给出异常提示:系统资源不足,无法完成请求的服务.仔细排查之后发现是系统内核句柄数一直增加不释放,句柄数大概有 ...