div常用的属性width和height，有的时候如果我们需要让div的高度是整个屏幕的高度，设置height：100%发现并没有什么作用，并不是这样设置不对，而是w3c规范中关于百分比的设置是相对于父元素的，如下所示:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>博客园-FlyElephant</title>

    <style type="text/css">

    .parent {

        background: red;

        height: 100%;

    }

    </style>

</head>

<body>

    <div class="parent">

    博客园-FlyElephant

    </div>

</body>

</html>

发现div的高度只是文字的高度，如果需要让div铺满整个屏幕，我们需要设置一下父级元素的高度，也就是html和body:

    html,body {

        height: 100%;

        padding: 0;

        margin: 0;

    }

高度是相对于父级元素的，但是html级元素默认宽度是100%，即整行~

CSS-div高度100%设置问题的更多相关文章

  1. css span宽度和css span高度成功设置经验篇

    我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px ...

  2. <!DOCTYPE html>声明下div高度100%

    问题:在HTML页面中声明<!DOCTYPE html>,页面中div属性设置100%页面显示不正常 body { max-width: 720px; margin: 0 auto; } ...

  3. html div高度100%无效

    移动端相关: div高度继承自父元素——>body——>html 解决方案: html,body { height: 100%;margin: 0; padding: 0;} 然后对应的d ...

  4. CSS div 高度满屏

    方法一: 通过JQuery,获取窗体的高度,设置给对应的div.代码如下 ht = $(document.body).height(); $(); 缺点:由于浏览器是先解析css,后执行JS,导致页面 ...

  5. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  6. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  7. 如何设置div高度为100%

    div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...

  8. CSS未知div高度垂直居中代码_层和布局特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. HTML学习之给div高度设置百分比不生效的问题

    这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: < ...

随机推荐

  1. loj2048 「HNOI2016」最小公倍数

    link 题意: 给定一张$N$个顶点$M$条边的无向图(顶点编号为$1,2,...,n$),每条边上带有权值.所有权值都可以分解成$2^a \cdot 3^b$的形式. 现在有$q$个询问,每次询问 ...

  2. WorldFinal11 （2/11）

    WorldFinal 11 Trash Removal 题意 给你一个多边形,问这个多边形至少需要多宽的长度,才能把这个多边形放进去. 数据范围100 题解 数据范围只有100,暴力枚举两点,然后算最 ...

  3. spring-boot 速成(11) - 单元测试

    一.添加依赖项: testCompile 'org.springframework.boot:spring-boot-starter-test:1.5.2.RELEASE' 二.单元测试代码示例 im ...

  4. 一个.net程序客户端更新方案

    客户端程序一个很大的不便的地方就是程序集更新,本文这里简单的介绍一种通用的客户端更新方案.这个方案依赖程序集的动态加载,具体方案如下: 将程序集存储在一个文件数据库中,客户端所有程序集直接从文件数据库 ...

  5. Linux Delay Accounting

    https://andrestc.com/post/linux-delay-accounting/ Ever wondered how long is your program spending wh ...

  6. 解决iframe加载的内容有时显示有时不显示

    在ASP.NET MVC项目中遇到了这样的一个问题,假设父页面有一个iframe <iframe id=" width="100%" height="10 ...

  7. Windows Phone本地数据库（SQLCE）：6、[Index] attribute（翻译）（转）

    这是“windows phone mango本地数据库(sqlce)”系列短片文章的第六篇. 为了让你开始在Windows Phone Mango中使用数据库,这一系列短片文章将覆盖所有你需要知道的知 ...

  8. Java知识回顾 （2） Java 修饰符

    一.Java 修饰符 1.1 访问控制修饰符 Java中,可以使用访问控制符来保护对类.变量.方法和构造方法的访问.Java 支持 4 种不同的访问权限. default (即缺省,什么也不写): 在 ...

  9. mormot支持https

    mormot支持https 将ssl证书导入电脑系统,以Windows 10为例: 运行 mmc 证书导入成功后,双击证书,查看证书指纹: 第二项工作:将证书与https绑定:以管理员身份启动cmd, ...

  10. C#编程（六十四）----------并行扩展

    并行的扩展 扩展1. Parallel的使用: 在Parallel下面有三个常用的方法Invoke,For,ForEach Parallel.Invoke()方法是最简单,最简洁的将串行的代码并行化. ...