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. Web大前端面试题-Day4

    1. 如何实现瀑布流? 瀑布流布局的原理:1) 瀑布流布局要求要进行布置的元素等宽,   然后计算元素的宽度,   与浏览器宽度之比,得到需要布置的列数;2) 创建一个数组,长度为列数,   里面的值 ...

  2. 卡在 构建 gradle 项目信息

    之所以卡死是因为Android Studio在初次构建的时候,会联网进行gradle目录的更新操作.断网之后就不会去主动更新了. 断网. 打开项目. 把 gradle 改成 使用当地. ======= ...

  3. 缩减apk大小

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 1,重复的资源,不用的资源,删去. 2,使用混淆,可以优化. 3,尽量的使用代码,或者其 ...

  4. [Java]struts2-spring整合时配置监听器

    1.struts2-spring整合时配置监听器 [在web.xml中] <!-- 上下文载入器监听器,确保web服务器启动时,直接完成spring容器的初始化 --/> [Ctrl + ...

  5. 喵哈哈村的魔法考试 Round #7 (Div.2) 题解

    喵哈哈村的魔法考试 Round #7 (Div.2) 注意!后四道题来自于周日的hihocoder offer收割赛第九场. 我建了个群:欢迎加入qscoj交流群,群号码:540667432 大概作为 ...

  6. Codeforces Round #272 (Div. 2) B. Dreamoon and WiFi dp

    B. Dreamoon and WiFi 题目连接: http://www.codeforces.com/contest/476/problem/B Description Dreamoon is s ...

  7. android防止按钮连续点击方案之AOP

    转载请标明出处http://www.cnblogs.com/yxx123/p/6675567.html 防止连续点击的实现方式有很多种,比如,在所有的onclick里面加上防多次点击的代码,或者定义一 ...

  8. UVA 11732 - strcmp() Anyone?(Trie)

    UVA 11732 - strcmp() Anyone? 题目链接 题意:给定一些字符串,要求两两比較,须要比較的总次数(注意.假设一个字符同样.实际上要还要和'\0'比一次,相当比2次) 思路:建T ...

  9. 使用Edge模式通知Internet Explorer以最高级别的可用模式显示内容

    一.EasyUI$的window('open')在IE8下兼容性问题 今天在公司使用EasyUI的$('#win').window('open');方法打开一个window窗体时发现EaysUI的脚本 ...

  10. 交叉编译Python-3.6.0到aarch64/aarch32 —— 支持sqlite3

    参考 https://datko.net/2013/05/10/cross-compiling-python-3-3-1-for-beaglebone-arm-angstrom/ 平台 主机: ubu ...