右侧固定菜单

Question

我有一个网页，中间有一个主div，可以垂直滚动。

我希望有一个固定的菜单，一直停留在页面的右侧。但是，如果我使用＆＃39; position：fixed＆＃39;，当我将页面调整为小于中央div时，菜单会重叠中央div

全宽页面：

调整页面：

相反，我希望中央div的最小宽度优先，固定菜单只在这种情况下通过向右滚动显示。

固定菜单是否可以位于中央div的右侧，而不是粘在浏览器的右侧？

很抱歉，如果这个问题不清楚，我很乐意回答评论中的任何不确定因素

Answer 1

您可以添加第二个div，其宽度与菜单下方的菜单相同，以推动中心div或您可以调整主div的大小。

Answer 2

使用This可能会在开始时造成混淆，但将是解决方案。 （用班级＆＃34; col-md-8＆＃34;做一个空的div;然后给nave栏一个带有＆＃34; col-md-4＆＃34;类的环绕div。到处都有课程在这方面，所以它不应该很难接受。希望这会有所帮助：）

Answer 3

一种简单而有效的方法是使用flexbox。 假设您的中心div为600px，侧边栏为200px，那么您将拥有以下CSS：

.container {
  width: 100%;
  display: flex;
  // flex defaults to left-to-right row & nowrap, fine in this case
  justify-content: space-between;
  // makes sure your 2 child divs will be pushed left & right
}

.main {
  flex-grow: 1; // makes the main div grow to occupy space if width > 800px
  flex-shrink: 0; // main div never shrinks below its flex-basis size
  flex-basis: 600px;
}

.sidebar {
  flex-grow: 0; // sidebar never grows
  flex-shrink: 0; // and never shrinks
  flex-basis: 200px;
}

请参阅this Codepen

有一点需要注意：Flexbox支持在较旧的浏览器（IE 10）上是不稳定的，或者是不支持的（IE 9及以下版本）。