Instantly share code, notes, and snippets.
Created
June 3, 2016 07:22
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save kakari2/4e33bbf8741ada9588839f1077d77c4a to your computer and use it in GitHub Desktop.
Fixed Header/Footer html sample
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
| <html> | |
| <meta http-equiv="Content-Language" content="ja" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <style type="text/css"> | |
| /* html,bodyタグの設定 */ | |
| html, body{ | |
| margin: 0; /* 余白の削除 */ | |
| padding: 0; /* 余白の削除 */ | |
| width:100%; | |
| height:100%; | |
| } | |
| /* ヘッダーの固定 */ | |
| div#header-fixed | |
| { | |
| position: fixed; /* ヘッダーの固定 */ | |
| top: 0px; /* 位置(上0px) */ | |
| left: 0px; /* 位置(右0px) */ | |
| width: 100%; /* 横幅100% */ | |
| height: 70px; /* 縦幅70px */ | |
| } | |
| div#header-bk { | |
| background-color:#ccc; /* ヘッダー背景色 */ | |
| padding:5px 0 5px; /* 上5px、下5pxをあける */ | |
| height:60px; /* 縦の高さ60px */ | |
| width:100%; /* 横の幅を100% */ | |
| } | |
| div#header-box { | |
| height: 100%; /* 縦の表示領域はheader-bkと同じ */ | |
| width : 95%; | |
| min-width: 500px; | |
| margin: auto; /* 中央揃え */ | |
| display: table; | |
| } | |
| div#header-left { | |
| display: table-cell; | |
| width: 30%; | |
| border: 1px solid #000; | |
| } | |
| div#header-center { | |
| display: table-cell; | |
| width: 50%; | |
| border: 1px solid #000; | |
| } | |
| div#header-right { | |
| display: table-cell; | |
| width: 20%; | |
| border: 1px solid #000; | |
| } | |
| /* フッターの固定 */ | |
| div#footer-fixed | |
| { | |
| position: fixed; /* フッターの固定 */ | |
| bottom: 0px; /* 位置(下0px) */ | |
| left: 0px; /* 位置(左0px) */ | |
| width: 100%; /* 横幅100% */ | |
| height: 70px; /* 縦幅70px */ | |
| } | |
| div#footer-bk | |
| { | |
| background-color:#ccc; /* フッター背景色 */ | |
| padding:5px 0 5px; /* 上5px、下5pxをあける */ | |
| height:60px; /* 縦の高さ60px */ | |
| width:100%; /* 横の幅を100% */ | |
| } | |
| div#footer-box { | |
| height: 100%; /* 縦の表示領域はheader-bkと同じ */ | |
| width : 95%; | |
| min-width: 500px; | |
| margin: auto; /* 中央揃え */ | |
| display: table; | |
| } | |
| div#footer-left { | |
| display: table-cell; | |
| width: 30%; | |
| border: 1px solid #000; | |
| } | |
| div#footer-center { | |
| display: table-cell; | |
| width: 50%; | |
| border: 1px solid #000; | |
| } | |
| div#footer-right { | |
| display: table-cell; | |
| width: 20%; | |
| border: 1px solid #000; | |
| } | |
| /* ボディの定義 */ | |
| div#body-bk{ | |
| padding:80px 0 80px 0; /* 上下に80pxを余白を取る */ | |
| } | |
| div#body{ | |
| min-width:960px; | |
| margin:auto; | |
| } | |
| </style> | |
| <head>・・・</head> | |
| <body> | |
| <div id="header-fixed"> | |
| <div id="header-bk"> | |
| <div id="header-box"> | |
| <div id="header-left"> | |
| <span>abcdefg</span> | |
| </div> | |
| <div id="header-center"> | |
| <span>abcdefg</span> | |
| </div> | |
| <div id="header-right"> | |
| <span>abcdefg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="body-bk"> | |
| <div id="body"> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| <div> | |
| <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> | |
| </br> | |
| <span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="footer-fixed"> | |
| <div id="footer-bk"> | |
| <div id="footer-box"> | |
| <div id="footer-left"> | |
| <span>abcdefg</span> | |
| </div> | |
| <div id="footer-center"> | |
| <span>abcdefg</span> | |
| </div> | |
| <div id="footer-right"> | |
| <span>abcdefg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment