Help us understand the problem. What is going on with this article?

IEでもガタガタしないヘッダー固定や左メニュー固定

前置き

最近はあまりないデザインかもしれないが、左メニュー、ヘッダー、フッターを固定したデザインで、
デザイナーの意向により、スクロールバーの表示エリアが指定されていたので、position: fixed;を使って実装していた。
IEやEdgeでは、スクロールするとかなりガタガタしていて、使用状況としても、IEユーザーが多かったので、Flexboxを使った書き方に変えました。そのメモです。

Flexboxは、IEでも基本的に問題なく使えますが、
ひとつだけ左寄せ(右寄せ)したいときに使える、margin-right: auto;(margin-left: auto;)はIEでは使えないので、flex: 1;などを使って工夫が必要です。

実装方法

作りたいもの

sample_image1.png

コード

  <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%のフッターを作るために上下に分割します。
sample_image2.png

  <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;
  }

手順②

手順①で分割した上の部分を左右に分割します。
sample_image3.png

  <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;
  }

手順③

手順②で分割した右の部分をさらに上下に分割します。
sample_image1.png

  <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のエリアでもさらにヘッダー、フッター固定が必要な場合
sample_image4.png

  <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;
  }

おまけ②

左メニューを閉じたり幅を狭くする場合
classを追加する方法は割愛しますが、transitionを設定しておけば簡単にアニメーションできます
sample_image6.png

  .close .layout_left{
    width: 10px;
  }
  .layout_left,
  .layout_right{
    transition: 0.3s;
  }
mimoe
2013.04から1年間、専門学校でアプリ開発の勉強をし、2014.04からWeb制作会社で、主にフロントエンドの仕事をしています。 前職は接客だったので、プログラム関係Web関係はまだまだ初心者です。 自分の備忘記録のためにも書きます。
http://ameblo.jp/mimoesnotepad
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away