네비게이션 바 고정시키기

스크로를 위아래로 돌려도 상태바와 네비게이션바는 고정되어야 한다.

 

먼저 네비게이션 바를 고정해보자

position:fixed; 를 이용해 고정시키면 설정된 크기값들이 사라져 배열이 깨진다.

이를 위해 width:100%;를 준다. (body의 100%, 부모의 너비를 백프로 받는다는 것)

** 우리가 position을 fixed로 바꿀때 우리는 반드시 수동으로 width를 추가해줘야한다.

 

고정할 위치가 아래이므로 bottom:0; 에 위치시킨다.

그러고나면 ...(ellipsis) 아이콘이 사라지는데, 패딩으로 인한 문제다.

이때, box-sizing:border-box; 를 추가해준다.

이는 padding 에 상관없이 box의 크기를 변경하고 싶지 않을 경우에 사용하는 것이다.