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. 数据包发包工具bittwist

    数据包发包工具bittwist   渗透测试中,通过发送特定格式的包,可以实施网络嗅探和攻击.Kali Linux提供一款发包工具bittwist.该工具可以通过指定的网络接口发送数据.该工具不仅可以 ...

  2. BeagleBone Black教程之BeagleBone Black使用到的Linux基础

    BeagleBone Black教程之BeagleBone Black使用到的Linux基础 BeagleBone Black涉及到的Linux基础 在许多没有Linux相关经验的人看来,Linux看 ...

  3. BZOJ4065 : [Cerc2012]Graphic Madness

    因为两棵树中间只有k条边,所以这些边一定要用到. 对于每棵树分别考虑: 如果一个点往下连着两个点,那么这个点往上的那条边一定不能用到. 如果一个点往下连着一个点,那么这个点往上的那条边一定不能用到. ...

  4. 高性能server分析 - Hadoop的RpcServer

    一.Listener Listener线程,当Server处于运行状态时,其负责监听来自客户端的连接,并使用Select模式处理Accept事件. 同时,它开启了一个空闲连接(Idle Connect ...

  5. [原创]互联网金融App测试介绍

    [原创]互联网金融App测试介绍 前端时间非常忙,终于非常忙的时间过去了,抽时间总结下我现在所在公司理财软件App测试,也各位分享下,也欢迎大家提建议,谢谢! 先介绍下我所在公司的产品特点,公司所研发 ...

  6. “一次编写，随处运行” Intel HTML5技术研讨会

    HTML5 是一种开放标准.通过使用此标准,开发人员只需编写一次程序,即可在任何地方运行. 这一跨平台方法能够显著增加开发人员的总体潜在受众,同时在不同屏幕尺寸上为用户带来更一致的体验.因此,HTML ...

  7. STM32F4 Timer Internal Trigger Connection

    The Timers can be cascaded to make more complex timing relationships, or longer periods. Internally ...

  8. Programming 2D Games 读书笔记(第三章)

      示例一:DirectX Window Graphics类用于初始化Direct 3D 主流程: 仅需要粗体部分 try{ // Create Graphics object graphics = ...

  9. wp使用上下文菜单

    功能的实现需要toolkit中的MenuItem对象,具体实现方法有两种:XAML编程实现和.CS中代码实现: 1,XAML实现: 首先,在页面的xaml中加入引用: xmlns:toolkit=&q ...

  10. UIWindow 介绍：概述、作用、主要属性及方法

    概述: UIWindow 类是 UIView 的子类,用于管理.协调应用中显示的窗口,其两个最重要的职能就是 容器,给 view 提供展示的区域: 将事件(例如:点击事件.拖拉事件等)分发给 view ...