Question

我有一个固定的顶部Toolbar和一个固定的Sidebar。我想将Sidebar放在Toolbar下，但不想放置任何top值或margin-top。可能吗？使用top值，我已经使用Bootstrap-4做到了这一点。

<!-- Sidebar  -->
 <nav id="sidebar" class="sticky-top sticky-offset">
    -----------------
 </nav>

<nav class="navbar fixed-top">
   -------------
</nav>

<style>
.sticky-offset {
    top: 56px!important;
}
</style>

我不想使用top

Answer 1

您能详细说明一下，为什么不想为容器放置任何top属性吗？如果将Sidebar容器放在 Toolbar容器中，则可以轻松实现所需的内容。在这种情况下，您可以将Toolbar与position: fixed;和Sidebar与position: absolute;一起使用：

HTML

  <div class="navbar">
    <span>Toolbar</span>
    <div id="sidebar">
      <span>Sidebar</span>
    </div>
  </div>

CSS

.navbar {
  height: 50px;
  width: 100%;
  position: fixed;
  left: 0;
}

#sidebar {
  width: 50px;
  height: 190px;
  position: absolute;
  right: 0;
  top: 100%;
}

查看这个Fiddle演示，也许它将使您步入正轨： https://jsfiddle.net/giiintas/xLjvg17e/12/

如何在不固定最高价值的情况下修复工具栏和侧边栏？

1 个答案: