在一个没有固定宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

最新推荐文章于 2022-08-16 18:06:03 发布
最新推荐文章于 2022-08-16 18:06:03 发布
阅读量479 收藏
点赞数
原文链接：http://www.cnblogs.com/crf-Aaron/p/8871923.html
版权

此场景适用于移动端百分比布局，背景全屏显示。

在一个没有固定宽高的容器中设置背景，想要背景全屏显示，设置宽高100%后还需设置position:absolut;

原因：

absolute会脱离normal float, 即该元素会直接以root标签(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值.

而relative不会脱离normal float, 他的height会直接依赖直接父元素(em单位也是), 所以百分比计算出来的高度是依照父元素继承的.

 

转载于:https://www.cnblogs.com/crf-Aaron/p/8871923.html

akkpuo8970
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示
06-12
例如，顶部行可以设置为固定高度，底部行设置为固定在底部，而中间行则需要动态填充剩余空间并保持内容居中。 为了实现全屏，我们可以设置body和html的height属性为100%，这样可以确保整个页面填满屏幕的高度。然后...
position为fixed的元素，高度不是满屏；transform对定位元素的影响；绝对定位的元素，高度不是全屏；
xiao_yu_liu的博客
12-20 2030
今天的开发中，遇到一个问题，div使用绝对定位，但是高度却不是全屏幕。 代码如下： div{ position:fixed; top:0; left:0 bottom:0; right:0; width:100vw; height:100vh; } 效果图如下： 结果： 经查证，该元素的父元素，使用了transform，也在网络上查证，并没有找到合适的官方文档，网络上也有码友遇到此类问题，但是没有有力的文档。 解决： 1、改写父元素的transform，使用其他方式，完成transform
定位position总结
beeliang
04-13 7335
1.定位position 属性值： 绝对定位 position：absolute （不保留位置 脱离文档流） （1）没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏 如果修改了元素大小 使得浏览器最大最小值改变，还是相对于之前的 并不会改变 （2）有父元素且父元素有定位，参照物是父元素 一般是设置子绝父相 可以设置top、bottom、left、right 值控制相对位置 固定定位 fixed：相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bott
css高度设置占满页面,《CSS》关于高度铺满的问题
weixin_30026331的博客
08-04 6608
场景一：我想让这个div铺满整个页面。方法一：先让根元素和body铺满，再然div铺满，这样div就会继承body的高度了。:root,body {height: 100%;}.wrap {width: 100%;height: 100%;background-color: skyblue;}方法二：让div脱离文档流，再铺满.wrap {width: 100%;height: 100%;back...
position:absolute的容器居中
weixin_34236497的博客
07-27 307
web页面开发中，最经常是使用的当然要属于容器居中啦，“居中”有时候是一个很简单的问题，但是！有时候也让人苦恼的“牙痒痒”！HTML代码如下： <div id="parents"> <div id="child">child container</div> </div> CSS代码（...
CSS全屏布局的6种方式
weixin_34414196的博客
05-04 471
前面的话 　　全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的6种思路   float 【1】float + calc 　　通过calc()函数计算出.middle元素的高度，并设置子元素高度为100% &lt;style&gt; body,p{margin: 0;} body,html,.parent{height: 100%;} .mid...
CSS Position定位属性全面讲解
qq_43293207的博客
03-15 564
前言 CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性（值可为CSS数值单位，正负决定其方向）则决定了该元素的最终位置。 1. static定位 position属性的默认值，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。 2. relative相对定位 基于元素原本的位置进行定位移动。此时 top、right、bottom、left 属性均基于原本的位置进行移动尺寸
一个简单的全屏图片上下打开显示网页效果示例
01-19
上源码看效果： <!DOCTYPE html> <html> <head> <title><...position: fixed;...position: absolute; width: 100%; } .d { background: url(1.jpg) center center no-repeat; h
DIV+CSS 全屏垂直居中的一个办法
12-13
我是先定了一个点在中间，然后再把里边的这一块居中处理； <style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:#FFCC33;border:1px solid #0033FF; width:300...
jQuery关闭后不再显示的全屏图片广告代码
06-10
在网页设计中，有时我们需要实现一种功能，即用户关闭一次全屏...此外，为了保证用户体验，通常会在广告关闭后设置一个合理的Cookie有效期，例如30天，以便在一段时间后重新显示广告，避免用户长期看不到任何广告内容。
HTML5 body设置自适应全屏
11-21
错误的做法是将背景图设置在一个div内，并结合min-height属性，因为这样做可能会导致页面在内容较少时无法完全填充屏幕，特别是当用户设备的高度不同于设计图高度时，会出现底部的空白区域。 正确的、推荐的“终极...
小经验 | 解决关于使用了position:relative后的高度或者宽度的调整问题
weixin_44303404的博客
09-13 7167
今天写代码的时候发现，某一个元素设置了height属性为默认的auto，但高度不在自己预期之中。如下图，最底部多了很大一片空白。 将相关的元素设置border属性（用于调试），但一直找不到是哪里的问题。直到用谷歌调试一下，发现这个东西。 感觉这一个元素的高度刚好就是下面多出来的高度。后来我才忽然想起，原来右边的元素（表格）定义了position:relative属性。 position：relative–相对于本来的位置进行定位，同时不脱离文档流。 所以，中间的box高度实际上应该是左边元素高度+右边
关于css中的position:absolute定位不起作用或者溢出父元素隐藏不了的问题
热门推荐
glgom的博客
11-05 3万+
position:absolute定位不起作用？溢出父元素隐藏不了？的问题 总的原因还是对定位的理解错误。 position:absolute是相对父元素进行绝对定位的，且该父元素必须定义有position的值(relative、absolute、fixed)，若父元素没有定义有position，则是相对于body进行定位。 position总的来说分为绝对定位和相对定位。    值 ...
绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案
小菜吉的博客
11-05 7500
绝对定位的元素完全从文档流当中移走，所以他们的尺寸无法影响到父元素的尺寸。 如果你真的想实现绝对定位还能撑开父元素，只能通过JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。 或者，用 float: left / float:right 还有 margin 来调整位置，子元素再通过父元素设置的overflow:hidden来撑开父元素。 如果实在不懂，就把父元素的高度写死，只不过那啥了 ...
铺满全屏的div
突维
07-08 1154
继承法 <style> * { margin:0; padding:0; } html,body{ height:100%; } .box{ height:100%; background-color:blue; } ...
布局，全屏，横屏竖屏
Mr_haimeng的博客
08-19 2073
五大布局FrameLayout（框架布局），LinearLayout （线性布局），AbsoluteLayout（绝对布局），RelativeLayout（相对布局），TableLayout（表格布局）。1、FrameLayout 所有东西依次都放在左上角，会重叠，这个布局比较简单，也只能放一点比较简单的东西。 <?xml version="1.0" encoding="utf-8"?
父级容器relative子级容器absolutte时，如何设置子级窗口的宽度
我是左小皓
03-31 463
<span style="color:#434343">当子容器的position设置为absolute或者fixed，如果元素的父容器为body的时候设置width为100%会出现横向滚动条，因为这里的100%是相对屏幕而不是浏览器。所以不能设置100%，如果想要全屏显示则设置子容器left:0px;right:0px;即可</span> <body&gt...
绝对定位元素宽度如何占满全屏
qq_42135741的博客
08-16 518
绝对定位元素宽度如何占满全屏
css的神奇操作之 height 100% position: absolute； 自适应全屏盒子
weixin_43601701的博客
06-17 1969
下面这段代码你猜猜div有多大 <body> <div>Overlay example text</div> </body> <style> *{ padding: 0; margin:0; } body { height: 3000px; width: 100%; } body div { position: absolute; height: 100%; width: 100%; backgr
用layui写一个点击缩略图,可以全屏显示相应图片,全屏后可以切换相邻图片
最新发布
04-01
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; } .close-btn { position: absolute; top: 10px; right: 10px; font-size: 30px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值