网络推广常见问题视觉设计编程知识开胜新闻行业新闻

网络推广

当position:fixed 遇到width:100% 右边超出容器

发布时间：2016-07-13 13:52:59 浏览次数：0

无论是开发web应用，还是开发h5手机应用，css是必须得用到的一种技术，css俗称样式表说白了就是系统或应用的皮肤，会使应用变得更漂亮更符合用户体验。

在开发手机应用程序的时候，遇到了fixed浮动无法实现宽度100%的问题。

position:fixed为浮动定位，也就是如果加了这个属性，那么该dom会随滚动条滚动而滚动，始终显示在屏幕指定的位置。在笔者添加了这一属性后，发现dom脱离了父类dom（和float或者absolute类似）直接包裹了dom里的文字如图

那么我们如何让他直接适应屏幕实现满屏呢，一般我们会这么解决，直接给该dom添加width:100%

那么，当然可以，立即生效

1

2

3

4

5

6

.div-dom-fixed{

            margin: 10px 0;

            position: fixed;

            bottom: 5px;

            width: 100%;

}

那么问题来了，如果，我们需要给button左右留出10px的间距，也就是说给button添加

1 2	`margin-left:10px;` `margin-right:10px;`

右边超出了屏幕

和我们预想的效果略有不同，那么如何解决这个问题呢？解决问题的办法我们用到了left和right这两个属性

也就是说，不要给button添加margin-left和margin-right，把width:100%也去掉直接使用left和right，问题就解决了。

1

2

3

4

5

6

7

.div-dom-fixed{

            margin: 10px 0;

            position: fixed;

            bottom: 5px;

            left: 10px;

            right: 10px;

}

上一篇：济南网站建设之跳过seo四大误区下一篇： mysql 错误的将root用户权限关闭之解决办法