Как исправить панель инструментов и боковую панель без фиксирования верхнего значения?

Question

У меня есть Top 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/