问题：在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. 【转】目标检测之YOLO系列详解

    本文逐步介绍YOLO v1~v3的设计历程. YOLOv1基本思想 YOLO将输入图像分成SxS个格子,若某个物体 Ground truth 的中心位置的坐标落入到某个格子,那么这个格子就负责检测出这 ...

  2. Ultra-QuickSort (POJ 2299)树状数组+离散化

    题目链接 Description In this problem, you have to analyze a particular sorting algorithm. The algorithm ...

  3. FunDA（9）－ Stream Source：reactive data streams

    上篇我们讨论了静态数据源(Static Source, snapshot).这种方式只能在预知数据规模有限的情况下使用,对于超大型的数据库表也可以说是不安全的资源使用方式.Slick3.x已经增加了支 ...

  4. NPM install 中：-save 、 -save-dev 和 没有--save的情况

    原文地址:https://www.cnblogs.com/limitcode/p/7906447.html npm install moduleName 命令 . 安装模块到项目node_module ...

  5. 字蛛fontSpider的使用

    字蛛官方文档 http://font-spider.org/index.html 首先安装全局包  npm install font-spider -g 然后下载字体 ,本次需要的是  "造 ...

  6. UIScrollView之isTracking delaysContentTouches canCancelContentTouches

    UIScrollView有一个BOOL类型的tracking属性,用来返回用户是否已经触及内容并打算开始滚动,我们从这个属性开始探究UIScrollView的工作原理: 当手指触摸到UIScrollV ...

  7. DataTable自身查询方法

    这里说到的查询有两种. 1.DataTable.Select 2.DataTable.Rows.Find   a>先建立一个DataTable供使用吧. /// <summary> ...

  8. GDAL VS2010 win7(64位)安装、使用说明（图文解析）

    一.电脑配置及安装版本 Win 7(64位机) Visual Studio 2010 GDAL 1.9.2(我也尝试了最新版GDAL1.11.0,应该同样可以用的,只是在重新配置时又选用了老一点的版本 ...

  9. express中间件原理 && 实现

    一.什么是express中间件? 什么是express中间件呢? 我们肯定都听说过这个词,并且,如果你用过express,那么你就一定用过express中间件,如下: var express = re ...

  10. Java之集合(三)ArrayList

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7291339.html 1.前言 本章介绍List中最常用的一个类--ArrayList.在第一章中已经介绍了Li ...