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

我已经尽我所能来解决这个问题。我张开双手跪下

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

如果您想了解页面的工作原理，只需在Firefox中查看页面（浏览器窗口小于992并向下滚动）。侧面板开始连接，然后在其余内容移动时“修复”为静态。这是正确的行为

• 主要问题

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

• 第二个问题

---

当视图窗口大约为1200px时，菜单栏和主内容面板之间的空间会加倍。这并不像第一个问题那么大（这让我试图用额头破坏公寓的挡土墙）-但这让我相对困惑，因为我相信一定有一个更优雅的解决方案，通过媒体查询将其重新定位

您需要做的是

修复左右列，从这一点开始，您将有一个更好的方法来控制您的div（因为我可以看到，您希望修复它们）

因此，总结：你需要在你的左栏和右栏中添加
position:fixed
。修改你的
left:x%
和
right:x%
，使它们符合你的标准。
你需要做的是
fixed
左栏和右栏，从那开始，你将有更好的方法来控制你的div（正如我所见，你想把它们修好）

因此，汇总：您需要在左侧和右侧列中添加
position:fixed
。修改
left:x%
和
right:x%
，使它们符合您的标准。
看起来您遇到了一个问题，即在没有位置标记的情况下，不同浏览器如何计算固定位置元素的位置CSS属性是为元素定义的，例如
top
和
left

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

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

我认为唯一的解决方法是选择不同的定位方案。您可以删除
.col md pull-*
和
.col md push-*
类，并使用绝对定位重新定位引导列（取决于媒体查询，以您希望的方式为不同的视口大小排列这些列）。在这种情况下，所有浏览器都显示固定元素的位置

.row {
  position: relative;
}

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

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

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

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

我认为唯一的解决方法是选择不同的定位方案。您可以删除
.col md pull-*
和
.col md push-*
类，并使用绝对定位重新定位引导列（取决于媒体查询，以您希望的方式为不同的视口大小排列这些列）。在这种情况下，所有浏览器都显示固定元素的位置

.row {
  position: relative;
}

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

示例：
左栏和右栏应该始终显示？即：它们的位置应该是固定的？是否有任何理由使用
-pull-
-push-
类对列进行重新排序？将它们取出，并按照您想要的实际顺序声明列，它似乎在Chrome中工作（刚刚在开发工具中对此进行了黑客攻击）。它们是这样的，因为我希望布局从[menu]-[content]-[details]开始，然后向下折叠，以降序形成一列，[details]-[menu]-[content]嗯，我不能让它工作。回答你的问题：位置是静态的，直到到达收割台顶部，然后位置交换到固定位置。：）任何人还有什么想法吗？！这是一个真正的解决方案。左栏和右栏应该随时显示？即：它们的位置应该是固定的？有没有理由用
-pull-
-push-
类重新排序列？将它们取出，并按照您想要的实际顺序声明列，它似乎在Chrome中工作（刚刚在开发工具中对此进行了黑客攻击）。它们是这样的，因为我希望布局从[menu]-[content]-[details]开始，然后向下折叠，以降序形成一列，[details]-[menu]-[content]嗯，我不能让它工作。为了回答你的问题：位置是静态的，直到到达页眉顶部，然后位置交换到固定位置。：）还有什么想法吗？！在真正的固定中。哇，这是我希望的一切。非常感谢！哇，这是我希望的一切。非常感谢！