如何使用我的侧边栏将其他元素推到右侧？

Question

我想创建一个占据整个屏幕高度的简单侧边导航。我正在使用Milligram 作为我的基地，我希望我的侧导航可以使用它。我有以下设置：

Codepen demo

如您所见，我的侧边栏是以下元素

<div class="sidebar"></div> 具有以下样式：

 div.sidebar {
    position: absolute;
    width: 250px;
    height: 100%;
    z-index: 99;
    background-color: black;
}

这种工作方式，侧边栏出现在一切之上，但其他一切都不会被推到一边。如果屏幕小，内容会与侧边栏发生冲突。

如何使侧边栏将其他所有内容（包括导航栏）向右推 250 像素（其宽度）？我知道这会让小屏幕上的东西无法使用，但我会给用户一种切换方式。

感谢任何帮助。

Answer 1

您可以将左边距设置为等于侧边栏的宽度。

section .container {
    margin-left: 250px;
}