Created
January 22, 2018 07:06
-
-
Save ichiroku11/30a01c982f19e34b5132992b103900de to your computer and use it in GitHub Desktop.
flexboxを使ってフルスクリーン＋ヘッダとフッタを固定
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>flexbox</title> | |
| <style> | |
| *, | |
| ::before, | |
| ::after { | |
| box-sizing: inherit; | |
| } | |
| html { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; /* 子要素を垂直方向に並べる */ | |
| min-height: 100vh; /* フルスクリーンにする */ | |
| margin: 0; /* リセット（スクロールバーが出ないように） */ | |
| } | |
| /* ヘッダは上部に固定 */ | |
| header { | |
| background-color: #e0fad2; | |
| height: 50px; | |
| } | |
| /* メインはいっぱいに広げる */ | |
| main { | |
| background-color: #f8fbff; | |
| flex: 1; /* flex-growのこと */ | |
| } | |
| /* フッタは下部固定 */ | |
| footer { | |
| background-color: #d7eafe; | |
| height: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header></header> | |
| <main></main> | |
| <footer></footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment