问题描述

很多同学，对于设置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%的问题的更多相关文章

  1. 解决html设置height：100%无效的问题

    通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...

  2. height:calc(100% - 40px)

    在移动端开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的: .container{ height: calc ...

  3. css中 出现height为100%失效的原因及解决方案

    我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...

  4. CSS设置height为100%无效的情况

    CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...

  5. 背景图height：100%显示

    这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题: 本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写 群友提供了一个办 html,body{height:1 ...

  6. CSS难点 为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案

    前言 相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用.今天我们就来一探究竟 原因:父元素未设置具体高度,子元素设置height:100%是无效的. 现象以及方 ...

  7. 关于vue项目去除margin和padding后设置元素width和height为100%后，出现滚动条问题（移动端）

    bug点,这个页面设置100%(100vw和100vh).页面出现抖动. 经过一番检察,原因出现在,vue项目自动添加的一个div上.就是body里的最后一个.如果选中这个元素,右键删除它.页面就不会 ...

  8. WPF 中如何变相让 ListBox 宽度（Width） 100%，高度（Height） 100%，从而达到 Filled 的效果

    直接贴代码了: XAML: <Window x:Class="HelloWorld.MainWindow" xmlns="http://schemas.micros ...

  9. height设置100%不起作用

    详细讲解了原因:http://www.webhek.com/post/css-100-percent-height.html

随机推荐

  1. linux进程,作业,守护进程,进程间同步

    ps axj命令查看系统中的进程.参数a表示不仅列当前用户的进程,也列出所有其他用户的进程,参数x表示不仅列有控制终端的进程,也列出所有无控制终端的进程,参数j表示列出与作业控制相关的信息: 凡是TP ...

  2. TCP、UDP、IP包头结构分析（转）

    1.TCP数据段格式 TCP是一种可靠的.面向连接的字节流服务.源主机在传送数据前需要先和目标主机建立连接.然后,在此连接上,被编号的数据段按序收发.同时,要求对每个数据段进行确认,保证了可靠性.如果 ...

  3. PC-改变电脑的CPU，内存，硬盘大小！

    如何修改CPU频率及内存容量和硬盘大小 改变电脑的CPU,内存,硬盘大小!--------------------------------------------------------------- ...

  4. 程序员提高工作效率的15个技巧【Facebook】

    程序员提高工作效率的15个技巧[Facebook] 作者: habadog 日期: 2015 年 02 月 13 日发表评论 (0)查看评论 程序员提高工作效率的15个技巧[Facebook] 1,D ...

  5. HTML---Android与js交互实例

    Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML) ...

  6. 准备开一个地图SDK的开源项目

    最近有点空闲时间了, 准备开一个地图SDK的开源项目, 现在的地图SDK已经有很多了, 再做一个跟重新发明个轮子差不多, 但还想做的原因是想在别的轮子的基础上造个轮子... 初步设想是基于开源的地图渲 ...

  7. 【转】在Windows下搭建React Native Android开发环境

    http://www.jianshu.com/p/2fdc4655ddf8 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变 ...

  8. hi3531的h264压缩中改动波特率

    typedef struct hiVENC_ATTR_H264_CBR_S { HI_U32 u32Gop; HI_U32 u32StatTime; HI_U32 u32ViFrmRate; HI_F ...

  9. Linux内核：关于中断你须要知道的

    1.中断处理程序与其它内核函数真正的差别在于,中断处理程序是被内核调用来对应中断的,而它们执行于中断上下文(原子上下文)中,在该上下文中执行的代码不可堵塞. 中断就是由硬件打断操作系统. 2.异常与中 ...

  10. Android（java）学习笔记140：SpannableString类的使用

    我们之前说过了我们想实现在TextView组件之中,可以显示URL.Email等特殊信息,这些信息点击可以实现跳转,真正意义上的超链接 要实现上面的需求就要SpannableString这个类. 因为 ...