<!DOCTYPE html>声明下div高度100%
问题：在HTML页面中声明，页面中div属性设置100%页面显示不正常
body {
max-width: 720px;
margin: 0 auto;
}
.case {
background-color: #68CDD5;
height: 100%;
}
页面中case为最大的div的class，设置了height:100%，页面并未正常显示，蓝色部分并未铺满整个页面。
原因：在HTML5标准要求高度或宽度设置成百分比时，参照的是父标签。
解决：
html和body之间是逗号，不是空格。说明这是一个多标签选择器，不是派生选择器。
```
html,body {
max-width: 720px;
margin: 0 auto;
height: 100%;
}
.case {
background-color: #68CDD5;
height: 100%;
}
```
正常的页面显示如下
<!DOCTYPE html>声明下div高度100%的更多相关文章
- html div高度100%无效
移动端相关: div高度继承自父元素——>body——>html 解决方案: html,body { height: 100%;margin: 0; padding: 0;} 然后对应的d ...
- 如何设置div高度为100%
div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- IE下div使用margin:0px auto不居中的原因
IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用, ...
- Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。
一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...
- 转载：IE下div使用margin:0px auto不居中的原因
转自:http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html 一般在将div居中显示时,使用css: divX {margin:0 ...
- 父div高度不能根据子div高度自动变化的解决方案
<div id="parent"> <div id="content"> </div> </div> 当cont ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
- 子元素div高度不确定时父div高度如何自适应
粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...
随机推荐
- python脚本 读取excel格式文件 并进行处理的方法
一.安装xlrd模块 pip install xlrd 二.读取excel文件 try: excel_obj = xlrd.open_workbook("文件路径") except ...
- 程序猿的日常——Java基础之equals与hashCode
equals和hashCode是我们日常开发最常使用的方法,但是因为一般都使用默认的规则,因此也很少会引起关注.不过了解他们的用途和设计的原则,还是会帮助我们更好的设计代码. equals equal ...
- day 47 Django 4的简单应用 创建简单的图书管理 (单表的增删改查)
前情提要 Django 已经学了大半.. 很多东西已经能够使用在生产环境当中 一:模糊查询 二:单表删除 三:单表修改 四:图书管理 图书管理操作 视图结构 A:路由层 A :配置路由文件 参数解 ...
- Go语言学习笔记(3)——分支、循环结构
1 条件语句: if, else if, else 特殊用法:判断num是奇是偶:其中局部变量num只能在该if...else语句中使用! if num := 10; num % 2 == 0 { ...
- js05
继续学习js,在这里我们主要讲述一下js的BOM(浏览器对象模型)以及一些js库和应用这些js库的方法. 1.浏览器对象模型(BOM): window对象: 表示浏览器窗口,所有的 ...
- 51单片机SRF寄存器
1.21个寄存器介绍 51系列单片机内部主要有四大功能模块,分别是I/O口模块.中断模块.定时器模块和串口通信模块(串行I/O口),如其结构和功能如下图: 图1 51单片机结构和功能图 ...
- Mac 10.12连接iSCSI硬盘软件iSCSI Initiator X
Mac下的iSCSI协议苹果一直以来没有集成,而网络上流传的最好用支持iSCSI硬盘的软件是globalSAN,但是这个软件是收费的,当然有破解版,只不多不太好找,因为现在用iSCSI的用户已经很少了 ...
- Java之集合(二十一)LinkedTransferQueue
转载请注明源出处:http://www.cnblogs.com/lighten/p/7505355.html 1.前言 本章介绍无界的阻塞队列LinkedTransferQueue,JDK7才提供了这 ...
- Form表单如何可以传递多个值传递List数组对象到后台的解决办法
举例说明: 后台有一个对象 User ,结构如下: 后台有一个对象 User ,结构如下: public class User{ private String username; private Li ...
- [转载]7款开源ERP系统比较
现在有许多企业将ERP项目,在企 业中没有实施好,都归咎于软件产品不好.其实,这只是你们的借口.若想要将ERP软件真正与企业融合一体,首先得考虑企业的自身情况,再去选择适合的 ERP软件. 如果你的企 ...