Question

我有一个可以折叠的侧导航。我希望我的工具栏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%

但我有动态侧导航的问题

Answer 1

如果您使用right在元素上设置CSS position: fixed属性，则不会超出页面边缘：

right: 0;

请务必同时删除width: 100%。

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

1 个答案: