_sticky-footer

コンテンツが少ない場合でも、フッターを下部に固定します。

引数	型	初期値	説明
`@include _sticky-footer($main, $footer, $type);`
`$main`	String	`.main`	メインとなる要素で、`$type` が `table` `flex` のときは必須
`$footer`	String	`.footer`	フッターとなる要素で、`$type` が `flex` `sticky` のときは必須
`$type`	String	`flex`	用いる手法
			`table`	`display: table;` を使った手法
			`flex`	`display: flex;` を使った手法
			`grid`	`display: grid;` を使った手法
			`sticky`	`position: sticky;` を使った手法

初期値

メイン部分のコンテンツが少ない場合、フッターは下部に固定され、コンテンツが多い場合はそのまま下に続くようになります。

<html>
<body>
  <div class="main">メイン</div>
  <div class="footer">フッター</div>
</body>
</html>

@include _sticky-footer;

[メイン部分に追加] ボタンをクリックすると、動作を確認できます。

Sticky Footerを実装する手法をいくつか用意しています。

<html>
<body>
  <div>メイン</div>
  <div>フッター</div>
</body>
</html>

@include _sticky-footer($type: grid);

Gridレイアウトで実装したいときは $type 引数に grid と指定します。