내 사이드 ​​바를 사용하여 다른 요소를 오른쪽으로 밀어 넣는 방법?

Question

전체 화면의 높이를 차지하는 간단한 사이드 탐색을 만들고 싶습니다. 내베이스에 Milligram을 사용하고 있습니다. 사이드 웍을 사용하기를 원합니다. I는 설정 다음 한 :

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

작품의 이런 종류의 :

Codepen demo

당신이 볼 수 있듯이, 내 사이드 ​​바는 다음과 같은 요소는 다음 스타일

<div class="sidebar"></div>입니다 사이드 바는 다른 모든 것보다 많이 보이지만 다른 모든 것은 측면으로 밀려 들지 않습니다. 그리고 화면이 작 으면 내용이 사이드 바와 충돌합니다.

사이드 바가 다른 모든 항목 (navbar 포함)을 오른쪽으로 250px (너비)만큼 밀어 넣을 수 있도록하려면 어떻게해야합니까? 나는 이것이 작은 화면에서는 사용할 수 없게 만들 것이라는 것을 안다. 그러나 나는 사용자에게 그것을 토글 할 방법을 줄 것이다.

도움을 주시면 감사하겠습니다.

Answer 1

왼쪽 여백을 사이드 바 너비와 동일하게 설정할 수 있습니다.

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