问题:在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. Bonjour Operations

    https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/NetServices/Articles/NetServi ...

  2. js闭包之我见

    很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: function test(){ for(var i=0;i<5;i++){ window.onclick=function( ...

  3. WebDriverAPI(1)

    访问某网页地址 被测网址http:http://www.baidu.com Java语言版本的API实例代码 方法一: @Test public void visitURL(){ String bas ...

  4. Linux服务器快速安装可视化桌面且可以远程RDP远程连接

    我们很多网友在选择Linux服务器的时候并不是用来做网站的,有些是需要用到远程桌面安装软件或者是其他用途.但是我们知道大部分海外主机商是只有LINUX系统且没有可视化桌面,当然也有一些商家是支持安装G ...

  5. C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇)

    C语言-apache mod(模块开发)-采用apxs开发实战(centos7.2 linux篇) 名词解释:apxs apxs is a tool for building and installi ...

  6. Linux的shell script

    Linux的shell script //编辑shell: vi a.sh //子进程运行shell sh a.sh //主线程运行shell source a.sh 相关例子: #!/bin/bas ...

  7. python字符串中包含Unicode插入数据库乱码问题 分类: Python 2015-04-28 18:19 342人阅读 评论(0) 收藏

    之前在编码的时候遇到一个奇葩的问题,无论如何操作,写入数据库的字符都是乱码,之后是这样解决的,意思就是先解码,然后再插入数据库 cost_str = json.dumps(cost_info) cos ...

  8. GODADDY 优质DNS 未被墙

    下面列出的是我本地测试出的优质服务器 NS10.DOMAINCONTROL.COM NS12.DOMAINCONTROL.COM NS14.DOMAINCONTROL.COM NS19.DOMAINC ...

  9. 请编写一个C函数,将一个字符串逆序

    目前有两种思路,一个是申请一片辅助空间,然后将原字符串逆向拷贝到辅助空间,然后输出:另一种是原地逆序,不需要额外的辅助空间,方法就是字符串首尾交换. #include <stdio.h> ...

  10. CSS学习笔记(基础篇)

    CSS概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) Css是用来美化html标签的,相当于页面化妆. 样式表书写位置: <head> < ...