00.cssフレームワークbulma用テンプレート:03.ヘッダーnavbarとフッターfooter
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
00.cssフレームワークbulma用テンプレート:03.ヘッダーnavbarとフッターfooter [2020/11/24] – 作成 adash333 | 00.cssフレームワークbulma用テンプレート:03.ヘッダーnavbarとフッターfooter [2021/01/08] – [見出し] adash333 | ||
---|---|---|---|
行 5: | 行 5: | ||
https:// | https:// | ||
フッターを、画面下に固定 | フッターを、画面下に固定 | ||
+ | |||
+ | < | ||
+ | .main { | ||
+ | display: flex; | ||
+ | min-height: 100vh; | ||
+ | flex-direction: | ||
+ | } | ||
+ | |||
+ | .section { | ||
+ | flex: 1; | ||
+ | } | ||
+ | And then adjust your template like this: | ||
+ | |||
+ | <body class=" | ||
+ | <div class=" | ||
+ | ... | ||
+ | </ | ||
+ | <footer class=" | ||
+ | ... | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== サンプルコード ===== | ||
+ | |||
+ | index.html | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | | ||
+ | <script defer src=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <body class=" | ||
+ | | ||
+ | <nav class=" | ||
+ | <div class=" | ||
+ | <a class=" | ||
+ | Bulmaテンプレート | ||
+ | </a> | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | <section class=" | ||
+ | <div class=" | ||
+ | <!-- ここにコンテンツを記載 --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <footer class=" | ||
+ | <div class=" | ||
+ | <a href=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | style.css | ||
+ | < | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
00.cssフレームワークbulma用テンプレート/03.ヘッダーnavbarとフッターfooter.txt · 最終更新: 2021/01/08 by adash333