<!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即父容器不根据内容 ...
随机推荐
- react.js 点击事件传递参数的方法
<button onClick={this.handleClick.bind(this, props0, props1, ...}></button> handleClick( ...
- java中使用OpenOffice
1. 下载软件/傻瓜安装 OpenOffice 下载地址http://www.openoffice.org/ JodConverter 下载地址http://sourceforge.net/proje ...
- 组件基础—Vue学习笔记
ammm学习Vue有好几天了,今天遇到难点所以打算写一点随笔加深印象. 一.首先最简单的创建组件 1全局组件 Vue.component() Vue.component('hello',{ tem ...
- mysql层的内存分配
参考 http://www.cnblogs.com/justfortaste/p/3198406.html http://m.blog.csdn.net/blog/IT_PCode/17007833 ...
- 【xsy1131】tortue FFT
题目大意: 一次游戏要按N个按键.每个按键阿米巴有P[i]的概率按错.对于一串x个连续按对的按键,阿米巴可以得分 $f(x)=tan(\dfrac{x}{N})\times e^{arcsin(0.8 ...
- J05-Java IO流总结五 《 BufferedInputStream和BufferedOutputStream 》
1. 概念简介 BufferedInputStream和BufferedOutputStream是带缓冲区的字节输入输出处理流.它们本身并不具有IO流的读取与写入功能,只是在别的流(节点流或其他处理流 ...
- RabbitMQ : 几种Exchange 模式
AMQP协议中的核心思想就是生产者和消费者隔离,生产者从不直接将消息发送给队列.生产者通常不知道是否一个消息会被发送到队列中,只是将消息发送到一个交换机.先由Exchange来接收,然后Exchang ...
- 剑指offer五十三之表示数值的字符串
一.题目 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3.1 ...
- 数据？算法-> which is important?
谷歌的强不是强在 PageRank 算法,而在于它是第一个在排名时把链接——而不只是文字和标题——考虑进去的.又以自己教的数据挖掘课为例.他让学生以 Netflix 用户对一万八千多部电影的打分为基础 ...
- Redis客户端使用
http://wenku.baidu.com/view/6ccd650af12d2af90242e63d.html 一.下载jedis 代码 jedis 代码地址:https://github.com ...