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. Codeforces.314E.Sereja and Squares(DP)

    题目链接 http://www.cnblogs.com/TheRoadToTheGold/p/8443668.html \(Description\) 给你一个擦去了部分左括号和全部右括号的括号序列, ...

  2. BZOJ.3932.[CQOI2015]任务查询系统(主席树 差分)

    题目链接 对于这一区间的操作,我们可以想到差分+前缀和(感觉也没什么别的了..). 同时对于本题我们能想到主席树,而主席树正是利用前一个节点建树的. 所以离散化.按时间排序,把操作拆成单点加和减即可. ...

  3. POJ.1379.Run Away(模拟退火)

    题目链接 POJ输出不能用%lf! mmp从4:30改到6:00,把4:30交的一改输出也过了. 于是就有了两份代码.. //392K 500MS //用两点构成的矩形更新,就不需要管边界了 #inc ...

  4. 8、Redis中sort命令详解

    写在前面的话:读书破万卷,编码如有神 ------------------------------------------------- 1.排序 (1)sort:可以对List.Set.ZSet里面 ...

  5. mysql分页查询优化(索引延迟关联)

    对于web后台报表导出是一种常见的功能点,实际对应服务后端即数据库的排序分页查询.如下示例为公司商户积分报表导出其中一个sql ,当大批量的导出请求进入时候,mysql的cpu急剧上升瞬间有拖垮库的风 ...

  6. Mysql_解决The total number of locks exceeds the lock table size错误

    在操作mysql数据库表时出现以下错误. 网上google搜索相关问题,发现一位外国牛人这么解释: If you're running an operation on a large number o ...

  7. doc文件中的cer附件保存到本地

    在word文档中有一个cer附件,可以双击直接安装证书. 我想把它保存到本地文件系统中,直接选中复制下来的cer文件,使用时,系统提示是无效证书.怎么才能正确 保存到本地文件系统?方法如下: 1.双击 ...

  8. 利用 PHP 导出 Git 某个分支下，新增或修改过的文件

    使用 SVN 作为版本控制的时候,整理过一个 导出文件脚本:利用 PHP 导出 SVN 新增或修改过的文件 现在换成了 Git,整理出类似的脚本: [第一版]git.php <?php /** ...

  9. 【leetcode】 Permutation Sequence

    问题: 对于给定序列1...n,permutations共同拥有 n!个,那么随意给定k,返回第k个permutation.0 < n < 10. 分析: 这个问题要是从最小開始直接到k, ...

  10. 使用SIGALRM信号为阻塞操作设置超时

    我们经常会遇到为阻塞操作设置超时的问题,比如说阻塞套接字read读取设置10秒超时,其中一个办法就是调用alarm函数,它在指定超时时期产生SIGALRM信号,使得阻塞操作中断. 但其弊端在于: 1. ...