html:

<body>
<div class="box"></div>
</body>

css:

.box{
position: fixed;// 使用fixed定位
width: 100%;
height: 100%;
background: orange;
}

补充: (父元素不设高度,如何让子元素高度100%)

https://www.cnblogs.com/mmykdbc/p/9582586.html

1

让height: 100%生效的更多相关文章

  1. 使flex-direction: column的子元素height: 100%生效的办法

    在flex-direction: column子元素里直接使用height:100%,height并不会被设置成100% <!DOCTYPE html> <html lang=&qu ...

  2. 深入理解CSS系列(二):为什么height:100%不生效?

    对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...

  3. 关于height:100%不生效的问题

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  4. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

  5. 关于 iframe 在ie11 height:100% 无效的巨坑

    好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...

  6. css height:100%失效

    有时做移动端页面时,需要用到height:100%来控制,但是设置完后会发现,用百分比的高是不生效的. 经过上网浏览等查阅资料得知,是否可以使用百分比是根据父级对象定义的.所以解决方法就是在body和 ...

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

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

  8. css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  9. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

随机推荐

  1. python测试开发django-53.xadmin里Model分类管理(proxy=True)

    前言 django的xadmin后台使用xadmin.site.register注册时,一张表只能注册一次,在后面页面上只能显示出一个页面. 有时候我们想从里面筛选出自己想要的数据,比如有全部的学生成 ...

  2. Jquery如何获取某个元素前(后)的文本内容?

    <span> text here... <a id="target_element">百万创想</a></span> 如何获得a标签 ...

  3. MySQL性能调优的10个方法 - mysql数据库栏目

    摘要: https://edu.aliyun.com/a/29036?spm=5176.11182482.related_article.1.hbeZbF 摘要: MYSQL 应该是最流行了 WEB ...

  4. 解析XML出错,无法创建DOMDocument对象

    [问题] 加载XML配置文件时,创建DOMDocument对象总是失败,创建代码如下: MSXML2::IXMLDOMDocumentPtr pXMLDoc; MSXML2::IXMLDOMEleme ...

  5. 微信小程序WebSocket报错:Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received

    Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was ...

  6. [Python设计模式] 第18章 游戏角色备份——备忘录模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 用代码模拟以下场景,一个游戏角色有生命力,攻击力,防御力等数据,在打Bos ...

  7. bootstrap响应式前端页面

    技术:HTML+CSS+JS+bootstrap   概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...

  8. 【php】php5.0以上,instanceof 用法

    1.instanceof php官网:http://php.net/manual/zh/language.operators.type.php 2.instanceof 用于确定一个 PHP 变量是否 ...

  9. python时间模块time详解

    在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime以及calendar.这篇文章,主要讲解time模块. 在开始之前,首先要说明这几点: ...

  10. 10个最好的免费PS图象处理软件方案

    说到照片和图像编辑/操纵,真的没有更好的应用,Adobe PS图象处理软件. 摄影师和创意工作室会同意这是总理的照片编辑应用期. 不幸的是,PS图象处理软件还配备了一个陡峭的学习曲线和价格标签,我们必 ...