如何将fixed定位的div宽度设为static定位同级元素的宽度

问题根源 #

你设置的* { margin: 0 20px; }给所有元素（包括.stick、.x、.zindex这些div）加了左右各20px的外边距，这些div的实际宽度是视口宽度 - 40px（左右margin总和）。但.bottom-nav是position: fixed，这个定位会让元素脱离正常文档流，不再继承全局的margin，直接以视口为基准，所以你设width:100%时，它会占满整个视口宽度，比其他div宽40px。

解决方案 #

给.bottom-nav加上和其他元素一致的左右margin，同时保持width:100%，利用你已经设置的box-sizing: border-box，它会自动把margin和border算进宽度里，最终宽度就和其他同级div一致了。

修改后的.bottom-nav CSS代码：

.bottom-nav {
  box-sizing: border-box;
  background-color: white;
  height: 30px;
  border: 5px solid black;
  bottom: 0px;
  position: fixed;
  z-index: 4;
  text-align: center;
  /* 新增这两行 */
  width: 100%;
  margin: 0 20px;
}

额外优化建议 #

全局*选择器里重复写了两次box-sizing: border-box，可以删掉其中一个避免冗余；另外padding: 0 auto是无效写法（padding不支持auto值），如果不需要可以直接删掉这行。

内容的提问来源于stack exchange，提问作者denjeneer