css - Bootstrap 3，Chrome 中的三列固定布局中断

Question

我已经尝试了所有方法来解决这个问题。我张开双手跪倒在地！

您可以在此处查看页面草稿：

如果您想了解页面应该如何工作的要点，只需在 Firefox 中查看它（浏览器窗口小于 992 并向下滚动。侧面板开始附加，然后“修复”变为静态，而其余内容移动。这是正确的行为

问题出现在 Chrome 中。当菜单栏和详细信息栏“修复”时，（向下滚动页面一点）所有数字地狱都崩溃了。

当视图窗口大约为 1200px 时，菜单列和主内容面板之间的空间增加了一倍。这并不像第一个问题那么重要（这让我试图用我的前额破坏我公寓的挡土墙） - 但它让我相对困惑，因为我确信必须有一个更优雅的解决方案，强迫它通过媒体查询回到原位

score 1 · Accepted Answer

当没有为元素定义位置 CSS 属性时，您似乎遇到了不同浏览器如何计算固定位置元素位置的问题，例如top和left. 从规格：

...用户代理可以自由猜测其可能的位置。

为了计算静态位置，固定定位元素的包含块是初始包含块而不是视口......

我认为解决这个问题的唯一方法是选择不同的定位方案。您可以使用绝对定位删除.col-md-pull-*和.col-md-push-*类并重新定位 Bootstrap 列（根据媒体查询来排列这些列，以适应不同的视口大小）。在这种情况下，似乎所有浏览器都尊重固定元素的位置。

.row {
  position: relative;
}

/* apply to the details column */
.push-9 {
  position: absolute;
  left: 75%;
}

score 0 · Accepted Answer

你需要做的是fix左右两列，从那开始你将有一个更好的方式来控制你的 div（因为你希望它们被固定，正如我所看到的）。

所以，总结一下：你需要添加position:fixed到你的左列和右列。修改您的left: x%andright: x%使其符合您的标准。

2 回答 2