为什么位置固定减少了反应的宽度？答案

【问题标题】：Why position fixed reduced the width in react?为什么位置固定减少了反应的宽度？
【发布时间】：2018-09-03 10:28:28
【问题描述】：

当我使用position:fixed 时，为什么我的侧边栏宽度减小了？这是我的代码 https://codesandbox.io/s/1yr3nlqp74

重现错误的步骤

在使用位置之前

使用位置后这一行的css问题

 sideBar__block: {
    padding: 20,
    position: "fixed",
    top: "64px"
  },

【问题讨论】：

为什么要给它定位。没有它也可以正常工作
因为它会缩小以适应...它的行为类似于 inline-block，
必须固定位置吗？ - 你能用粘性位置代替吗？这一切都取决于您希望它在其上运行的浏览器。如果必须固定位置，您可以使用 javascript 计算具有灰色背景的容器 div 的宽度，然后使用 javascript 将宽度应用于固定定位的 div
如果你想使用固定位置，那么你也需要应用宽度。
这里有一些老生常谈的做法，将left: 0; right: 74%; 应用到.sideBar__block 这意味着它会随着项目的位置变化而改变宽度。这是一种纯粹的 CSS 方式。

【解决方案1】：

"Position:fixed" 将根据内容大小取宽度。为了更清楚地尝试增加列表项中的文本，您可以观察到侧边栏的宽度也增加了。

【讨论】：

【解决方案2】：

Position:fixed; 将使div 成为最大内容的大小，除非应用了宽度。

您可以尝试几个选项。

与width

 sideBar__block: {
    padding: 20;
    position: fixed;
    top: 64px;
    width:21%;
  }

要使页面灵活，您可以应用left 和right 定位

 sideBar__block: {
    padding: 20;
    position: fixed;
    top: 64px;
    left:0%;
    right:74%;
  }

对于更现代的浏览器，您可以使用position:sticky

 sideBar__block: {
    padding: 20;
    position: sticky;
    top: 64px;
  }

这些选项都将允许固定容器随屏幕弯曲。

【讨论】：