问题：在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. Navicat 12破解工具 +安装包

    下载地址: https://www.lanzous.com/b657322/ 密码:1j9x zip解压密码:gubin 下载完成 是这样的  先安装第一个  安装完成后 不要打开 ,把第二个复制到安 ...

  2. jzoj5805

    #include<bits/stdc++.h> using namespace std; int x,n,pp,ct[10000]; long double f[210][(1<&l ...

  3. fastAdmin根据状态显示是否显示操作按钮

    根据状态决定是否显示某个操作按钮 代码如下:

  4. 关于finecms v5 会员头像 任意文件上传漏洞分析

    看到我私藏的一个洞被别人提交到补天拿奖金,所以我干脆在社区这里分享,给大家学习下 本文原创作者:常威,本文属i春秋原创奖励计划,未经许可禁止转载! 1.定位功能 下载源码在本地搭建起来后,正常登陆了用 ...

  5. Elasticsearch-搜索推荐

    对于es中搜索推荐的功能的实现: 1.使用match_phrase_prefix来实现search-time搜索推荐,原理根match_phrase类似,唯一的区别是把最后一个term作为前缀去搜索, ...

  6. 手机端API接口验证及参数签名验证

    问题背景: 后端服务对手机APP端开放API,没有基本的校验就是裸奔,别人抓取接口后容易恶意请求,不要求严格的做的安全,但是简单的基础安全屏障是要建立的,再配合HTTPS使用,这样使后端服务尽可能的安 ...

  7. JavaWeb 基础面试

    1. 启动项目时如何实现不在链接里输入项目名就能启动?  修改Tomcat配置文件 server.xml.找到自己的项目配置 : <Context docBase="oneProjec ...

  8. python3和pip3安装和问题解决

    python3安装前,最好先安装下依赖包: yum install -y openssl-devel yum install -y openssl yum install -y zlib-devel ...

  9. 前端必备：FastStoneCapture 和 Licecap &&& mingw c++ 编译执行

    端必备:FastStoneCapture 和 Licecap FastStoneCapture这个软件非常小,只有2M多,并且其功能很强大,包括截图,录制视频,量尺,取色等等,对于前端工程师绝对是必备 ...

  10. 使用Second Copy同步ftp服务器的差异文件

    公司一直用自主开发的一个同步工具来进行数据库文件异机备份的,但无奈太不稳定,三天两头出现服务挂死的问题,特别是最近这1个月,几天就1次. 问题现象都是服务一直在运行,但没有复制文件到备份机上,而且备份 ...