css 親要素内の下部に固定したい

「position:fixed」だとウィンドウ内の下部に固定できるけど、親要素内は出来ないので「display:flex;」で行う。

作成日:2017-12-12, 更新日:2017-12-13

基本：2017/12/13

すごい面倒なやり方をしていた。・・・親子でやろうとしてるから面倒なんだ。

スクロールさせる枠の高さ固定
<div style="overflow:auto;height:〇〇〇px;">スクロールさせたい文字列</div>
<div>固定表示したい文字列</div>
スクロールさせる枠の高さ可変（最大の高さのみ指定）
<div style="overflow:auto;max-height:〇〇〇px;">スクロールさせたい文字列</div>
<div>固定表示したい文字列</div>

スクロールさせる高さ固定

01 鳥精 塩 120
02 鳥精 タレ 120
03 豚精 塩 120
04 豚精 タレ 120
05 ひな皮 塩 120
06 ひな皮 タレ 130
07 もちベーコン - 140
08 ウナギ - 140
09 丸ごとシマウマ 塩 160
10 丸ごとシマウマ タレ 160
11 牛タン 塩 160
12 牛タン タレ 160
13 鳥ハツ 塩 140
14 鳥ハツ タレ 140
15 豚ハツ 塩 130
16 豚ハツ タレ 130
17 牛ハツ 塩 130
18 牛ハツ タレ 130
19 ホルモン 塩 120
20 ホルモン タレ 120

▼中身が少ないとき

01 鳥精 塩 120
02 鳥精 タレ 120 
<div style="overflow:auto;height:200px;">
  <table class="table">
    <tr><th>01</th><td>鳥精</td><td>塩</td><td>120</td></tr>
    ～略～
  </table>
</div>
<div style="background-color:#ffeeee;padding:0.5em;">
  <a href="#" class="btn btn-primary">編集</a>
</div>

スクロールさせる高さ可変

01 鳥精 塩 120
02 鳥精 タレ 120
03 豚精 塩 120
04 豚精 タレ 120
05 ひな皮 塩 120
06 ひな皮 タレ 130
07 もちベーコン - 140
08 ウナギ - 140
09 丸ごとシマウマ 塩 160
10 丸ごとシマウマ タレ 160
11 牛タン 塩 160
12 牛タン タレ 160
13 鳥ハツ 塩 140
14 鳥ハツ タレ 140
15 豚ハツ 塩 130
16 豚ハツ タレ 130
17 牛ハツ 塩 130
18 牛ハツ タレ 130
19 ホルモン 塩 120
20 ホルモン タレ 120

▼中身が少ないとき

01 鳥精 塩 120
02 鳥精 タレ 120 
<div style="overflow:auto;max-height:200px;">
  <table class="table">
    <tr><th>01</th><td>鳥精</td><td>塩</td><td>120</td></tr>
    ～略～
  </table>
</div>
<div style="background-color:#ffeeee;padding:0.5em;">
  <a href="#" class="btn btn-primary">編集</a>
</div>

基本：2017/12/12

※win os10+chromeの組み合わせしか確認していない。

/** 親要素 **/
.〇〇〇 {
  display: flex;
  flex-direction: column;
  height: 〇〇〇;
}

/** 親要素内で高さを可変にしたい部分 **/
.〇〇〇 {
  flex: 1;
}

ウィンドウの下部にフッタを固定

<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
</style>

<body>
  <div class="content">
    <p>本文</p>
  </div>
  <footer>フッタ</footer>
</body>

親要素内の下部に固定

内容が足りないときは固定部を詰めたい

01 鳥精 塩 120
02 鳥精 タレ 120
03 豚精 塩 120
04 豚精 タレ 120
05 ひな皮 塩 120
06 ひな皮 タレ 130
07 もちベーコン - 140
08 ウナギ - 140
09 丸ごとシマウマ 塩 160
10 丸ごとシマウマ タレ 160
11 牛タン 塩 160
12 牛タン タレ 160
13 鳥ハツ 塩 140
14 鳥ハツ タレ 140
15 豚ハツ 塩 130
16 豚ハツ タレ 130
17 牛ハツ 塩 130
18 牛ハツ タレ 130
19 ホルモン 塩 120
20 ホルモン タレ 120

▼枠内で内容が足りないときのサンプル

01 鳥精 塩 120
02 鳥精 タレ 120 
<div style="display:flex;flex-direction:column;height:200px;border:1px solid #eee;">
  <div style="overflow:auto;">
    <table class="table">
      <tr><th>01</th><td>鳥精</td><td>塩</td><td>120</td></tr>
      ～略～
    </table>
  </div>
  <div style="background-color:#ffeeee;padding:0.5em;">
    <a href="#" class="btn btn-primary">編集</a>
  </div>
</div>

内容が足りなくても下部に固定

「flex:1;」を追加

01 鳥精 塩 120
02 鳥精 タレ 120 
<div style="display:flex;flex-direction:column;height:200px;border:1px solid #eee;">
  <div style="overflow:auto;flex:1;">
    <table class="table">
      <tr><th>01</th><td>鳥精</td><td>塩</td><td>120</td></tr>
      ～略～
    </table>
  </div>
  <div style="background-color:#ffeeee;padding:0.5em;">
    <a href="#" class="btn btn-primary">編集</a>
  </div>
</div>