fixed,absolute 布局使用width:100%超出屏幕宽度

最新推荐文章于 2023-11-22 15:22:36 发布
最新推荐文章于 2023-11-22 15:22:36 发布
阅读量860 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32255883/article/details/115563258
版权

在使用fixed,absolute 布局时，再使用width:100%，最终的实际宽度等于全屏宽度，若还有padding， 宽度再加上两边的pading值，设置margin值不影响其宽度。

这一点跟流中的元素表现有所不同。

mpz2520
关注
专栏目录
position:fixed 固定定位
asdfgv2022的博客
08-03 5万+
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
【HTML+CSS】4.CSS布局：盒模型和定位
M&Q的博客
04-14 1844
之前讲到，样式是CSS语法的最小单元，每一个样式都由选择器和声明（规则）两部分组成，而声明又由属性和属性值组成。上一篇讲了选择器，这里就开始进入“属性”部分了。 要想灵活应用CSS设计出美观且多样的页面，就需要熟悉CSS的各类“属性”，CSS中包含超过100种属性，包括字体属性、文本属性、边框属性、边距属性、布局属性、定位属性、打印属性等。作为初学者，我觉得我们应该循序渐进，先集中熟悉最常用...
position:fixed定位的元素,宽度超出，有更好的解决办法吗？
weixin_46429258的博客
03-17 7633
position:fixed定位的元素,宽度超出，怎么解决？ 最近做项目时，用fixed固定头部时，发现宽度超出。 因为整体布局为左右结构，父元素采用flex布局。左侧固定宽度，右侧填充。 右侧头部需要固定显示，下面内容可以滚动，width设置为100%时，发现超出父元素。 后解决办法为： .header { height: 50px; line-height: 50px; bo...
移动端fixed定位时，使用width:100%会超出屏幕宽度
小太阳的博客
09-30 4272
我的航线弹出框我是用了fixed定位，然后出现了下面这种情况，我的航线并没有垂直水平居中。 代码如下： .route-modal { position: fixed; // 固定定位 width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.45); z-index: 998; .my-route { background: #fff; border-radius: 10p
fixed定位的header头部元素width:100%后溢出覆盖了滚动条区域
hzxOnlineOk的博客
01-18 3432
请看以下图片的右上角，图片太大 请往左拉动查看。 解决办法：为header元素设定一个margin-left:-17px；（滚动条宽度好像是这个值）
POSITION fixed 的宽度百分比针对的是整个窗口的宽度
ISaiSai的专栏
08-16 4340
POSITION fixed 的宽度百分比针对的是整个窗口的宽度
position:absolute,position:fixed,width:100%,height:100%;释疑
weixin_30279315的博客
01-11 697
我做了一个模拟alert的弹出框，但是不能遮挡住滚动条下的内容，经过不断地测试发现时是我对position:absolute,position:fixed,width:100%,height:100%;理解有模糊的地方，现在做个测试记录如下： <body> <!-- 弹出框--> <dl id="idBox" class="lightbox"> ...
overflow: hidden;display: flex;display: inline-flex;display: inline-block;position: absolute;position: fixed;
最新发布
05-31
假设我有一个div元素，它的id为myDiv，并且我希望它始终在浏览器窗口的右下角，宽度为200px，高度为100px，同时不显示溢出的内容，并且在内部使用弹性布局。我会这样设置CSS属性： #myDiv{ position: fixed; ...
1、position:fixed 固定定位
hu_xingwei的博客
07-24 1060
1、position:fixed 固定定位
CSS定位布局及溢出
SORYUSHIKINAMI的博客
04-28 1107
定位： CSS定位（position）属性允许你自由设定元素的位置。 定位的基本思想很简单，他允许你定义元素框相对于其正常位置应该出现的位置，或者相对于有定位的父元素，另一个元素甚至浏览器窗口本身的位置 CSS有三种基本的定位机制：普通流，浮动和绝对定位。 position定位 position:static 静止定位 元素默认状态 position:absolute 绝对定位 相对...
设置position为absolute或fixed之后，子元素设置width 100%造成宽度溢出的问题
fqqbw的博客
11-05 4063
position设置绝对定位后width100%文本超出问题
子元素宽高设置为100%后，宽高都超出父级
weixin_40563746的博客
11-22 1906
而使用绝对定位时，子集元素的宽高是根据父级元素的padding盒子计算的，也就是说子集的宽度 = 父级左padding + content + 父级右padding，子集的高度 = 父级上padding + content + 父级下padding。当元素没有进行定位时，子集元素设置的宽度和高度的百分比，是根据content区计算的，也就是说，没有把padding、border计算进去。最近写样式遇到了如下现象：子集设置宽高为100%，但是溢出了父级，如下图所示。通过查阅资料，获知了原因。
绝对定位如何百分百宽
wenlyli的专栏
12-19 632
答案：  left:0 right:0
小程序 view给100%width 加上margin超出屏幕 解决
akko
08-29 1125
宽度设置为如下即可[对于position:absolute;情况也适用]： width: -webkit-fill-available;
关于html页面中头部navbar设置fixed绝对定位后，width 100% 会溢出覆盖滚动条
qq_44745931的博客
06-09 2509
关于html页面中头部navbar设置fixed绝对定位后，width 100% 会溢出覆盖滚动条 情况如下图： 头部覆盖住了滚动条 我遇到的情况分析： 前提： 头部和中间主体部分都在一个大的div元素下面，当头部采用fixed布局，中间主体部分没有采用定位且其高度超出父元素的高度时，会溢出导致滚动条的出现。 分析：此时滚动条是相对父元素出现的，不是相对于整个body的，而fixed定位是相对于整个浏览器窗体也就是body定位的，所以fixed定位的头部会压住滚动条。为了解决这个问题，就需要使滚动条是相对
小程序开发解决width=“100%“下padding无效问题
SilentLand的博客
11-16 1869
原因：我们给内容设置了width为100%，却在默认情况下它是标准盒模型，所以width只是指content的值，此时我们在给他加padding或者设置border宽度的时候，其实盒子的宽度就大于100%了。 解决方法：给加了padding或border的盒子加box-sizing: border-box; 实现的效果 <template> <view class="my"> <view class="topbg"> <image src="../.
高度100%的绝对定位自适应布局
wearegouest的专栏
05-01 647
容器高度100%是经常用到的需求，任何容器都可以实现，而且不需要嵌套关系。 把body看作是一个容器，做为内部对象的上层标签，他的高度设置为100%是关键。 最基本的例子* { margin:0; padding:0; border:0;}html,body { height:100%;} /* 同时设置html是为了兼容FF */#box_2 { height:100
width:100%与绝对定位同时存在，偏移出父级容器
weixin_30679823的博客
07-05 792
当父级容器内的子元素width设为100%，而子元素又有绝对定位时，子元素伸展超出父级容器，像下面 出现这种情况的原因，width：100%，这个百分之百是相对其定位父级而言的，其定位父级有多宽，这个子元素就有多宽，所以子元素跑到了父级容器外 html <div class="container"> <div class="content">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值