如何使用側欄將其他元素向右推？

Question

我想創建一個佔用整個屏幕高度的簡單側面導航。我正在使用Milligram作爲我的基礎，並且我希望我的side-nav能夠使用它。我有以下設置：

Codepen demo

正如你所看到的，我的側邊欄是以下元素

<div class="sidebar"></div>有以下類型：

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

這類作品中，側欄出現在其他所有位置，但其他所有內容不會被推到一邊。如果屏幕很小，則內容會與側邊欄衝突。

我該如何做到這一點，邊欄將其他所有內容（包括導航欄）向右推250px（寬度）？我知道這會讓小屏幕上的東西無法使用，但我會給用戶一種切換它的方法。

任何幫助表示讚賞。

Answer 1

您可以將左邊距設置爲等於側邊欄的寬度。

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