css固定定位问题?

Question

如何将下图中的内容固定在底部, 并保持左右空隙相等?

<!-- 底栏 -->
<view class="footer">
  123
</view>

.footer {
  background-color: var(--blue);
  color: var(--white);
  position: fixed;
  bottom: 75rpx;
  /* 受到定位影响, width, margin, padding 无效 */
  /* width: 100%; */
  /* margin-left: 1rem; */
  /* margin-right: 1rem; */
}

Answer 1

.footer {
  background-color: var(--blue);
  color: var(--white);
  position: fixed;
  bottom: 75rpx;
  width: calc(100vw - 2rem); 
  left: 1rem; 
  right: 1rem; 
}

Answer 2

用 left + right，或者配合 width。

比如：

.footer {
  left: 1rem;
  right: 1rem;
}

Answer 3

设置 margin 属性为auto
重置left 和 right 属性为0

Answer 4

position: fixed; // 生成绝对定位的元素， 相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。
left: 1rem;
right: 1rem;

Answer 5

1、需要在head添加meta标签【如果是h5 需要这一步，小程序则不需要】
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
2、html代码

<div class="footer">
  <div class="inner">
    <!-- your code -->
    </div>
</div>

3、css代码

.footer,.footer .inner {
    min-height: 40px; /* 这里根据设计稿来设置 */
    padding: 10px 15px calc(10px + constant(safe-area-inset-bottom));
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
}
.footer .inner {
    position: fixed;
    left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
}

4、然后自己的代码写在inner里面就可以

Answer 6

我这边在补充一个解决方案, 这里用了3层view嵌套

• 第一层 .footer-wrapper 使用fixed定位, 具备100%宽
• 第二层 .container 设置左右的内边距或外边距 (这里演示的是padding. 如果用的是margin, 就只需要嵌套两层)
• 第三层 .content 就是实际要呈现的内容

XWML代码

<!-- 底栏 -->
<view class="footer-wrapper">
  <view class="container">
    <view class="content flex-center">
      内容部分
    </view>
  </view>
</view>

WXSS代码

.footer-wrapper {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 75rpx;
}

.footer-wrapper .content {
  height: 75rpx;
  background-color: var(--blue);
  color: var(--white);
  border-radius: var(--border-radius-semicircle);
}

下图是实际效果