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



  1. body {
  2.        max-width: 720px;
  3.        margin: 0 auto;
  4.      }
  5. .case {
  6.        background-color: #68CDD5;
  7.        height: 100%;
  8.      }

页面中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. flask之flask_sqlalchemy

    一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用数据API执行SQL ...

  2. java中关键字static和final

    面向对象的不足 凡是有利必有弊,强对象编程,使得语法简单统一,但也有其缺点,而且有很多.我们在接下来的课程里会一点点接触到.我们今天先看第一个. 有些变量和函数确实没必要定义在一个类里.强行规定这些函 ...

  3. ubuntu16.04配置java环境(重启后不会失效)

    ubuntu16.04配置java环境(重启后不会失效) 1.jdk的安装包(.tar.gz)拷贝到/opt目录下 mv jdk-8u144-linux-x64.tar.gz /opt 2.解压文件 ...

  4. Adapter as a WCF Binding - In Depth

    WCF LOB Adapter SDK surfaces an adapter as a custom WCF Binding.  A WCF Bindingcorresponds to the “H ...

  5. 安装Apache时端口号被占用解决方案

    有些朋友的电脑在安装Apache是会遇到端口冲突的问题.以下是一种解决方案 1.打开控制面板的管理工具 2.打开IIS 3.观察网站下的端口号 4.点击绑定 5.更改端口号 6.重新启动即可

  6. Mcode的介绍

    开始时进行的Mcode代码积累平台的分析: 登录模块 Login.html登录页面进行用户的登录,把登录好的用户id存到session里面,转到代码模块 Register.html注册页面进行用户的注 ...

  7. 【bzoj5180】[Baltic2016]Cities 斯坦纳树

    这题一看显然是一个裸的斯坦纳树 我们用$f[i][j]$表示经过的路径中包含了状态$i$所表示的点,且连接了$j$号点的最短路径. 显然,$f[i][j]=min\{f[i$^$k][j]+f[k][ ...

  8. [经验]微信开放平台，一个APP secret可以绑定一个APP,然后再绑定一个ipad 版本APP

    微信开放平台,一个APP secret可以绑定一个APP,然后再绑定一个ipad 版本APP

  9. 【DB2】How to resolve SQL20249N the statement was not processed with error

    相关链接 https://vinaysdb2blog.blogspot.com/2017/11/how-to-resolve-sql20249n-statement-was-not-processed ...

  10. 【链表】Remove Duplicates from Sorted List II（三指针）

    题目: Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct  ...