height为100%的问题
问题描述
很多同学，对于设置div 的高度为100%时，有疑惑。
设置div 的高度为100%，意思是此 div 的高度 铺满父元素。
那么 怎么使 div 铺满浏览器屏幕？
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
body,html{
height: 100%;
width: 100%;
overflow: hidden;
margin:0;
padding: 0;
}
#wrap{
height: 100%;
width: 100%;
}
.scrollBox {
background-image: url(../模仿素材/about1Bg.jpg);
background-size: cover;
height: 100%;
width: 100%;
} </style>
</head>
<body>
<section id="wrap">
<section class="scrollBox">
</section>
</section>
</body>
</html>
设置section->section的height铺满浏览器，这时，设置scrollBox的height为 100%；再设置它的父元素wrap为100%；这时，我们打开浏览器查看效果。什么都没有显示。
查看元素。他们俩的height的值为0。
Why？
发现body和html的height值也为0。想到，wrap的父级元素是body，body的父级元素为html，要是我们设置它们为100%呢？
结果
成功了！！！！
height为100%的问题的更多相关文章
- 解决html设置height：100%无效的问题
通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...
- height:calc(100% - 40px)
在移动端开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的: .container{ height: calc ...
- css中 出现height为100%失效的原因及解决方案
我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...
- CSS设置height为100%无效的情况
CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...
- 背景图height：100%显示
这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题: 本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写 群友提供了一个办 html,body{height:1 ...
- CSS难点 为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案
前言 相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用.今天我们就来一探究竟 原因:父元素未设置具体高度,子元素设置height:100%是无效的. 现象以及方 ...
- 关于vue项目去除margin和padding后设置元素width和height为100%后，出现滚动条问题（移动端）
bug点,这个页面设置100%(100vw和100vh).页面出现抖动. 经过一番检察,原因出现在,vue项目自动添加的一个div上.就是body里的最后一个.如果选中这个元素,右键删除它.页面就不会 ...
- WPF 中如何变相让 ListBox 宽度（Width） 100%，高度（Height） 100%，从而达到 Filled 的效果
直接贴代码了: XAML: <Window x:Class="HelloWorld.MainWindow" xmlns="http://schemas.micros ...
- height设置100%不起作用
详细讲解了原因:http://www.webhek.com/post/css-100-percent-height.html
随机推荐
- Windows下使用GCC编译器
1.GCC编译器的选择 Windows下最常见的安装GCC的方式有两种:Cygwin和MinGW.本文主要介绍MinGW的安装配置. 2.下载MinGW 下载地址:http://sourceforge ...
- centos svn快速搭建
搭建SVN服务,有效的管理代码,以下三步可以快速搞定. 1.安装 #yum install subversion 判断是否安装成功 [root@]# svnserve --version 有了SVN软 ...
- Redis_php 学习
转载内容: PhpRedis是php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系很有用;以下是redis官方提供的命令使用技巧: Redis::__construct构造函数 1 ...
- 一切皆WEB
所有应用都应该成为Web应用吗?当然不是.总有一些重要的例外,有些种类的软件跟网络也毫无关系.但是,这些是少数情况,是一些特殊应用.它们固然是重要的小生态环境,但不管怎么说,就只是“小生态”. 如果你 ...
- SweetAlert 使用
$(".delete").click(function(){ var work_name = $(this).data('name'); var item_id = $(this) ...
- 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位
文件正在上传的转圈圈gif图片 一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验. <!--S 遮罩层 --> <div id="mas ...
- 判断URL是否能链接成功
判断网络文件 存在 3秒之内返回结果 方法2: /// <summary> /// 判断网络文件是否存在 1.5秒得到出结果 如这样的格式 http:// ...
- DelphiTXT文档编辑器
EXE:http://files.cnblogs.com/xe2011/Text_EditorRelease2013-12-20-185320.rar Delphi XE5 PAS:http://fi ...
- [React] React Fundamentals: State Basics
State is used for properties on a component that will change, versus static properties that are pass ...
- 合并两个vectcor——2013-08-26
vector<int> v1; vector<int> v2; for(int i=0; i<5; i++) { v1.push_back(i); if(i%2==1) ...