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

作者: 晓函 | 来源:发表于2021-02-19 14:33 被阅读0次

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

超出宽度

因为这是box模型默认是padding-box，100%宽度不包含padding值。

解决

我们只需要加上box-sizing: border-box;

.bottom-bar{
    position: absolute;
    bottom: 0;
    padding: 0 15px;
    box-sizing: border-box;
}

修改后

fixed,absolute 布局使用width:100%超出屏
在使用fixed,absolute 布局时，如果设置了左右方向的marg,pad等，在使用width:100%，会...
HTML 布局与定位
定位 position absolute relative fixed 绝对布局当使用绝对布局，会根据父布局左上...
从双飞翼布局浅谈相关
写一些常见布局的demo 顶端导航，固定到页面，使用到position: fixed; width: 100% 两...
网格布局介绍
一网页的布局演变 1 表格布局（table）2 定位布局（position: fixed、absolute等...
滑动事件
.box{width:100%;height: 100%;position: fixed;margin:auto;...
ios 中position:fixed定位问题
在ios中使用fixed定位，当页面超出一屏时会出现fixed定位随着页面滚动而滚动，解决方法，
小程序学习总结
1.static，absolute，relative，fixed，flex五种布局 static （1）sta...
控制HTML，一次加载完毕后再显示
方法一：.loading {position:fixed; width:100%; height:100%;} w...
垂直居中
.arpb {width: 100%;height: 100%;position: fixed;top: 0;le...
"盒子"垂直水平居中方法
方法一： {height:100px; width:100px; position:absolute; left:...

网友评论

本文标题：fixed,absolute 布局使用width:100%超出屏

本文链接：https://www.haomeiwen.com/subject/ssjaxltx.html