固定定位div容器内子元素百分比宽度未相对父级计算如何修复

问题原因 #

• 核心错误是side-bar-red元素也被加上了side-fixed类，设置了position: fixed属性。fixed定位的元素会脱离常规文档流，其百分比尺寸默认相对于浏览器视口计算，而非父元素，所以你给它设的95%宽度是取的窗口宽度的95%，不是父级黑色侧边栏的95%。
• 补充：就算父元素是fixed定位，只要子元素也是fixed，子元素的百分比宽度依旧是相对于视口，不会继承父元素的尺寸作为基准。

修复方案 #

最优方案是直接移除子元素上的side-fixed类即可，无需修改原有CSS规则：

修改后的HTML代码 #

<div class="side-fixed side-bar-black ">
  <div class="side-bar-red ">
    something...
  </div>
</div>

生效逻辑 #

移除side-fixed后，side-bar-red回归常规文档流，宽度的百分比计算基准就变成了其父元素side-bar-black的内容宽度，自然会渲染为父级宽度的95%。

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