IE에서도 흔들리지 않는 헤더 고정이나 왼쪽 메뉴 고정

전치

최근에는 별로 없는 디자인일지도 모르지만, 왼쪽 메뉴, 헤더, 바닥글을 고정한 디자인으로,
디자이너의 의향에 의해, 스크롤 바의 표시 에리어가 지정되어 있었으므로, position: fixed; 를 사용해 실장하고 있었다.
IE나 Edge에서는, 스크롤하면 꽤 덜컹 거리고 있어, 사용 상황으로서도, IE 유저가 많았기 때문에, Flexbox를 사용한 쓰는 방법으로 바꾸었습니다. 그 메모입니다.

Flexbox는 IE에서도 기본적으로 문제없이 사용할 수 있지만,
하나만 왼쪽 정렬(오른쪽 정렬)하고 싶을 때 사용할 수 있는 margin-right: auto; ( margin-left: auto; )는 IE에서는 사용할 수 없으므로 flex: 1;

구현 방법

만들고 싶은 것

코드

  <div class="layout_outer">
    <div class="layout_top">
      <div class="layout_left"></div>
      <div class="layout_right">
        <div class="layout_right_top"></div>
        <div class="layout_right_bottom"></div>
      </div>
    </div>
    <div class="layout_bottom"></div>
  </div>

 .layout_outer{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
  }
  .layout_top{
    flex: 1;
    overflow: hidden;
    display: flex;
  }
  .layout_left{
    width: 240px;
  }
  .layout_right{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .layout_right_top{
    height: 60px;
  }
  .layout_right_bottom{
    flex: 1;
    overflow: hidden;
  }
  .layout_bottom{
    height: 30px;
  }

해설

요점은 flex-direction: column;와 flex: 1;를 잘 사용하는 것입니다.
display: flex; 그리고, 좌우로 분할할 수 있는 것은, 잘 알려져 있다고 생각합니다만,flex-direction: column; 로 위아래로 나눌 수 있습니다.

자식 요소에 flex: 1;를 붙이면 자식 요소가 나머지 영역을 채 웁니다.overflow: hidden; 이나 overflow: auto; 를 조합하면 에리어를 넘은 내용이 있어도 딱 맞춰줍니다.

IE에서는 margin이나 padding을 0으로 해도 스크롤할 수 있게 되어 버리므로 html 태그에 overflow: hidden; 해야 합니다.

절차①

먼저 가로폭 100%의 바닥글을 만들기 위해 상하로 분할합니다.

  <div class="layout_outer">
    <div class="layout_top"></div>
    <div class="layout_bottom"></div>
  </div>

 .layout_outer{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
  }
  .layout_top{
    flex: 1;
    overflow: hidden;
    display: flex;
  }
  .layout_bottom{
    height: 30px;
  }

절차②

순서①에서 분할한 위 부분을 좌우로 분할합니다.

  <div class="layout_outer">
    <div class="layout_top">
      <div class="layout_left"></div>
      <div class="layout_right"></div>
    </div>
    <div class="layout_bottom"></div>
  </div>

  .layout_left{
    width: 240px;
  }
  .layout_right{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

절차③

순서②에서 분할한 오른쪽 부분을 한층 더 상하로 분할합니다.

  <div class="layout_outer">
    <div class="layout_top">
      <div class="layout_left"></div>
      <div class="layout_right">
        <div class="layout_right_top"></div>
        <div class="layout_right_bottom"></div>
      </div>
    </div>
    <div class="layout_bottom"></div>
  </div>

  .layout_right_top{
    height: 60px;
  }
  .layout_right_bottom{
    flex: 1;
    overflow: hidden;
  }

덤 ①

layout_right_bottom의 영역에서도 헤더, 바닥글 고정이 필요한 경우

  <div class="layout_outer">
    <div class="layout_top">
      <div class="layout_left"></div>
      <div class="layout_right">
        <div class="layout_right_top"></div>
        <div class="layout_right_bottom">
          <div class="layout_right_bottom_top"></div>
          <div class="layout_right_bottom_center"></div>
          <div class="layout_right_bottom_bottom"></div>
        </div>
      </div>
    </div>
    <div class="layout_bottom"></div>
  </div>

  .layout_right_bottom{
    display: flex;
    flex-direction: column;
  }
  .layout_right_bottom_top{
    height: 40px;
  }
  .layout_right_bottom_center{
    flex: 1;
    overflow: auto;
  }
  .layout_right_bottom_bottom{
    height: 40px;
  }

덤 ②

왼쪽 메뉴를 닫거나 폭을 좁히는 경우
클래스를 추가하는 방법은 생략하지만 transition을 설정하면 쉽게 애니메이션 할 수 있습니다.

  .close .layout_left{
    width: 10px;
  }
  .layout_left,
  .layout_right{
    transition: 0.3s;
  }