位置：在动态宽度侧导航旁边的 div 中的固定工具栏答案

【问题标题】：Position:fixed toolbar in a div next to a dynamic width side nav位置：在动态宽度侧导航旁边的 div 中的固定工具栏
【发布时间】：2016-06-17 18:04:06
【问题描述】：

我有一个可以折叠的侧导航。我希望我的工具栏 div 固定在顶部并填充其余的宽度。 100% 导致它离开页面。由于 sidenav 的动态宽度，我无法执行 calc()。

如何设置位置：固定 div 以填充剩余宽度？

这真的很难解决，我使用的是角度但基本上：

<body layout="row">
  <div layout="column" class="menu">
    Menu
  </div>
  <div class="view">
    <div class="toolbar">
       I'm a toolbar
    </div>
    Rest of the stuff on the page
  </div>
</body>

.menu {
  height: 100%;
  width: 300px; //current width anyway
}
.view {
  width: 100%;
}
.toolbar {
  background-color: grey;
  width: 100%;
  position: fixed;
  height: 60px;
}

问题看起来和这个人很像：Position Fixed width 100%

但我有动态侧导航的问题

【问题讨论】：

请添加您的问题的最小示例片段。尤其是你的 CSS 和 HTML。
看看 CSS 类也很有帮助。

标签： javascript html css

【解决方案1】：

如果您在带有position: fixed 的元素上设置CSS right 属性，它将不会越过页面边缘：

right: 0;

确保您也删除了width: 100%。

【讨论】：