<!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即父容器不根据内容 ...
随机推荐
- Weekly Contest 131
1021. Remove Outermost Parentheses A valid parentheses string is either empty (""), " ...
- C++中new申请动态数组
C++中数组分为静态数组和动态数组,静态数组必须确定数组的大小,不然编译错误:而动态数组大小可以不必固定,用多少申请多少.静态数组类于与我们去餐馆吃饭,餐馆会把菜做好.而动态数组类似于我们自己买菜做饭 ...
- FunDA（14）－ 示范：并行运算，并行数据库读取 - parallel data loading
FunDA的并行数据库读取功能是指在多个线程中同时对多个独立的数据源进行读取.这些独立的数据源可以是在不同服务器上的数据库表,又或者把一个数据库表分成几个独立部分形成的独立数据源.当然,并行读取的最终 ...
- FunDA（7）－ Reactive Streams to fs2 Pull Streams
Reactive-Stream不只是简单的push-model-stream, 它还带有“拖式”(pull-model)性质.这是因为在Iteratee模式里虽然理论上由Enumerator负责主动推 ...
- 初次学习Vue,输出Hello Vue!
Vue.js作为目前比较流行的js框架,而我却迟迟没有接触,深感不安! 使用vue之前先要下载vue.js文件,然后在html里面导入vue.js文件,下面试着输出"Hello Vue!&q ...
- 杭电OJ第11页2010-2019道题（C语言）
2010. 水仙花数 问题描述 Problem Description 春天是鲜花的季节,水仙花就是其中最迷人的代表,数学上有个水仙花数,他是这样定义的: "水仙花数"是指一个三位 ...
- WinForm—控制文本框只能输入整数（包括小数）
//控制控件输入的是正数(包括小数) private void txt_Weight_KeyPress(object sender, KeyPressEventArgs e) { //第一步:判断输入 ...
- 课程一(Neural Networks and Deep Learning)，第一周（Introduction to Deep Learning）—— 1、经常提及的问题
Frequently Asked Questions Congratulations to be part of the first class of the Deep Learning Specia ...
- (转)WebSphere 中池资源调优 - 线程池、连接池和 ORB
WebSphere 中池资源调优 - 线程池.连接池和 ORB 来自:https://www.ibm.com/developerworks/cn/websphere/library/techartic ...
- Win下Eclipse提交Hadoop程序出错：org.apache.hadoop.security.AccessControlException: Permission denied: user=D
描述:在Windows下使用Eclipse进行Hadoop的程序编写,然后Run on hadoop 后,出现如下错误: 11/10/28 16:05:53 INFO mapred.JobClient ...