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

最新推荐文章于 2022-11-05 23:11:37 发布
最新推荐文章于 2022-11-05 23:11:37 发布
阅读量7.5k 收藏 1
点赞数 3
CC 4.0 BY-SA版权
分类专栏： UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/w18637468680/article/details/83153112
本文探讨了在使用fixed和absolute布局时，设置左右方向的margin和padding对元素宽度的影响。当使用width:100%时，实际宽度会等于屏幕宽度加上padding值，与流中元素的表现不同。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用fixed,absolute 布局时，如果设置了左右方向的marg,pad等，在使用width:100%，最终的实际宽度等于全屏宽度+pading值，

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

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
09-28
不知道大家有没有遇到过这种情况，在设置了元素宽度width100%后再加上margin和padding超出父元素宽度，其实解决的方法很简单，直接使用CSS的 box-sizing 属性就可以解决这个问题，这个是CSS3新属性，可以将padding计算在width内。下面来一起看看吧。
fixed定位的header头部元素width:100%后溢出覆盖了滚动条区域
hzxOnlineOk的博客
01-18 3528
请看以下图片的右上角，图片太大 请往左拉动查看。 解决办法：为header元素设定一个margin-left:-17px；（滚动条宽度好像是这个值）
position:absolute,position:fixed,width:100%,height:100%;释疑
weixin_30279315的博客
01-11 736
我做了一个模拟alert的弹出框，但是不能遮挡住滚动条下的内容，经过不断地测试发现时是我对position:absolute,position:fixed,width:100%,height:100%;理解有模糊的地方，现在做个测试记录如下： <body> <!-- 弹出框--> <dl id="idBox" class="lightbox"> ...
CSS“width:100%”和宽度继承
LXJcjlu的博客
07-13 2633
理论篇 width:100%的相对于谁 想必学过CSS，了解了相对单位的童鞋们都应该知道：相对单位都有一个基准。那么width:100%是基于谁呢？ 我把可能出现的几种情况列在下面，并以DEMO说明，在最后进行总结。  一般层级元素 复制 type="text/css">.demo-parent {width:400px;height:60px;line-height:30px;b
body { padding: 0; margin: 0 } #unity-container { position: absolute } #unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) } #unity-container.unity-mobile { position: fixed; width: 100%; height: 100% } #unity-canvas { background: {{{ BACKGROUND_COLOR }}} } .unity-mobile #unity-canvas { width: 100%; height: 100% } #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none } #unity-logo { width: 500px; height:600px; background: url(''logo.png'') no-repeat center } #unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center } #unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center } #unity-footer { position: relative } .unity-mobile #unity-footer { display: none } #unity-webgl-logo { float:left; width: 500px; height: 100px; background: url('logo.png') no-repeat center } #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px } #unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center } #unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none } 做自适应全屏显示 修改进度条长度和logo图片 进度条自适应 留个修改进度条图片和logo图片的地方
最新发布
08-08
注意：原代码中#unity-logo的宽度和高度是固定值（500px和600px），这在大屏幕上可能没问题，但在小屏幕上可能会超出。我们可以将其改为相对单位（例如vw, vh）或者使用max-width/max-height限制。 7. 同样，...
position: absolute left：50% margin：负自身宽度一半内容不显示
03-11
如果父容器没有设置position: relative、absolute或fixed，元素可能会相对于更外层的容器定位，导致位置不符合预期，甚至超出可视区域。 另外，层叠顺序也可能影响显示。如果其他元素覆盖了该元素，或者z-index设置...
scroll滚动视图里面position: absolute left：50% margin：负自身宽度一半内容不显示
03-11
好的，我现在需要解决用户提出的问题：在滚动视图（scroll）中，使用position: absolute，left: 50%，并通过负的自身宽度一半的margin来居中元素，但内容不显示的问题。首先，我得回忆一下相关的CSS布局知识，尤其是...
.signature-trace-drawer display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -moz-box-orient: vertical; -moz-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 1001; background: rgba(0, 0, 0, 0.5); justify-content: center align-items: center overflow: scroll .signature-trace-content width 100% justify-content: center align-items: center .signature-trace-wrapper-body position relative background: white margin-left 20px margin-right 20px padding 0 20px border-radius: 12px .signature-trace-wrapper-close position: absolute left 50% bottom -50px height 24px width 24px @extends button.close // background: url(../images/close_lt.png) no-repeat center / cover background-size: 20px background-color: white; opacity: 1 border-radius: 100% transform: translate(-50%, -50%) text-align: center color : rgb(166,166,166) span font-size 20px line-height 24px .signature-trace-title font-size: 17px font-weight bold padding-top: 15px margin-bottom: 10px text-align: center color #202020 .signature-trace-image-container background: url('../images/miziGrid.png') no-repeat center/cover; background-size: 100% 100% background-repeat: repeat; position relative aspect-ratio 1 border-radius: 12px; background-color: #F5F5F5; display: flex justify-content: center align-items: center overflow hidden .ps-sign position absolute height 100% min-width 100% aspect-ratio 1 z-index 1002 .canvas height 100% width 100% .signature-trace-spinner display: none width 24px height 24px position: absolute top: 50% left 50% background: url('../images/loading.gif') no-repeat center/cover; transform translate(-50%, -50%) .signature-trace-template-img display: none; width 100% opacity: 0.4; background: no-repeat center/cover; .signature-trace-template-text display: none; justify-content: center align-items: center width: calc(100% - 50px); height: calc(100% - 50px) position: absolute top: 45% left 50% transform: translate(-50%, -50%) opacity: 0.4; .signature-trace-reload-content display: flex align-items: center justify-content: center position: absolute top: 50% left 50% transform: translate(-50%, -50%) .signature-trace-reload font-size 14px color #808080 white-space: nowrap; span color #808080 .signature-trace-button display: flex; justify-content: space-between; align-items: center; margin: 20px 20px 0 padding-bottom: 20px .signature-trace-resetting font-size 14px flex-grow:1; width 100px height 36px line-height 36px text-align: center background: #F5F5F5; margin-right: 10px border-radius: 16px color #202020 opacity: 0.3; .signature-trace-determine font-size 14px background-color: #ED5151 flex-grow:1; height 36px; width 100px line-height 36px text-align: center color #FFFFFF border-radius: 16px opacity: 0.3; .signature-trace-determine.center-block height 35px width 182px flex-grow 0 position relative left 50% transform translateX(-50%) @media only screen and (min-device-aspect-ratio:3/4) .signature-trace-drawer .signature-trace-content .signature-trace-wrapper-body margin-left 60px margin-right 60px .signature-trace-title font-size 12px 如上的样式，我在特别宽的屏幕上打开比如说平板上，signature-trace-wrapper-body就会变的很大，导致他的子元素signature-trace-wrapper-close关闭按钮看不到，signature-trace-button按钮区域也在屏幕上看不到，滚动也滚动不了，应该如何解决呢？
05-28
因为它的父容器.signature-trace-content设置了宽度100%，并且使用了flex布局，可能没有限制高度，导致.signature-trace-wrapper-body的高度超出视口，特别是当内容较多时，底部元素被截断。可能的解决方案包括： 1...
设置position为absolute或fixed之后，子元素设置width 100%造成宽度溢出的问题
fqqbw的博客
11-05 4603
position设置绝对定位后width100%文本超出问题
width:100%与绝对定位同时存在，偏移出父级容器
weixin_30679823的博客
07-05 843
当父级容器内的子元素width设为100%，而子元素又有绝对定位时，子元素伸展超出父级容器，像下面 出现这种情况的原因，width：100%，这个百分之百是相对其定位父级而言的，其定位父级有多宽，这个子元素就有多宽，所以子元素跑到了父级容器外 html <div class="container"> <div class="content">...
移动端fixed定位时，使用width:100%会超出屏幕宽度
小太阳的博客
09-30 4553
我的航线弹出框我是用了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
POSITION fixed 的宽度百分比针对的是整个窗口的宽度
ISaiSai的专栏
08-16 4384
POSITION fixed 的宽度百分比针对的是整个窗口的宽度
fixed定位之后出现宽度溢出问题解决
weixin_42178670的博客
08-20 6440
fixed定位之后出现宽度溢出问题解决 fixed定位之后，元素相对的定位是windows，往往会导致宽度溢出容器，解决办法如下： 在父元素中设置：transform:translate(0,0) 即可解决
小程序 view给100%width 加上margin超出屏幕 解决
akko
08-29 1230
宽度设置为如下即可[对于position:absolute;情况也适用]： width: -webkit-fill-available;
子元素使用position:fixed后宽度不能和父元素保持一致问题的解决方案
qq_44827891的博客
06-17 7297
position:fixed定位的元素,宽度超出，怎么解决？ 最近做项目时，用fixed固定在窗口底部时，发现宽度超出。 因为整体布局为左右结构，父元素采用flex布局。左侧固定宽度，右侧填充。 右侧头部需要固定显示，下面内容可以滚动，width设置为100%时，发现超出父元素。 初步解决方案： .header { height: 50px; line-height: 50px; border-bottom: 1px solid #cecece; box-shadow: 0 2px
关于html页面中头部navbar设置fixed绝对定位后，width 100% 会溢出覆盖滚动条
qq_44745931的博客
06-09 2695
关于html页面中头部navbar设置fixed绝对定位后，width 100% 会溢出覆盖滚动条 情况如下图： 头部覆盖住了滚动条 我遇到的情况分析： 前提： 头部和中间主体部分都在一个大的div元素下面，当头部采用fixed布局，中间主体部分没有采用定位且其高度超出父元素的高度时，会溢出导致滚动条的出现。 分析：此时滚动条是相对父元素出现的，不是相对于整个body的，而fixed定位是相对于整个浏览器窗体也就是body定位的，所以fixed定位的头部会压住滚动条。为了解决这个问题，就需要使滚动条是相对
关于宽度100% 出现横向滚动条的问题 以及注意您的显示器...
热门推荐
MrZZhou的博客
03-25 1万+
今天在做题的时候遇到这样一道题： 看一下感觉不难，然后就撸起来了。大体采用绝对定位，ie的盒模型（比标准盒模型好酸多了），感觉应该没啥问题的，走你-> 主体代码是这样的： *{ margin: 0; padding: 0; } html,body{ height: 100%; } heade
父级fixed_父元素设置absolute,子元素设置fixed定位失效
weixin_39955938的博客
12-22 1583
如下代码，应该一目了然<div class = "relative"><div class ="absolute"><div class="fixed"></div></div></div>里面的元素原本是正常定位的，需要动态改成fixed，又不能把元素移到外层，怎么解决？fixed相对于body定位，而不是相对于父元素abs...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值