このCSSが非常に厄介でいまいち思った通りの見た目になってくれない・・・。
いろいろ調べて、これはもうありがちなパターンをテンプレートにする感じなんではないかと思い始めてきました。 というわけで備忘録的なサンプルです。
目的
コンテンツが短いときは画面の下に、長いときはスクロールした先にフッターが表示されるようにする！
sumple.html
|
<!DOCTYPE html> <html> <head> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <link href="./sumplecss.css" rel="stylesheet" type="text/css" /> <title>sumple</title> </head> <body> <div id="container"> <header>ヘッダーだよ</header> <main>メインだよ <br />このの部分の長さが可変だとする。 <br />start <br />-- <br />-- <br />-- <br />-- <br />End <br /></main> <footer>フッターだよ</footer> </div> </body> </html> |
sumplecss.css
* { margin: 0px; padding: 0px; } html { height: 100%; background-color: #AACCCC; } body { height: 100%; } #container{ /* container以下の要素を横方向中央寄せする */ margin: 0 auto; position: relative; height: auto; min-height: 100%; width:600px; /* containerの背景色とmainの背景色は合わせておく */ background-color: #FFAAAA; } header{ width:600px; background-color: #9999CC; } main{ display: block; width:600px; /* footerの高さ分padding-bottomを設定する */ padding-bottom: 30px; /* containerの背景色とmainの背景色は合わせておく */ background-color: #FFAAAA; } footer { /* meinで設定したpadding-bottom分の高さを設定する */ height: 30px; position: absolute; bottom: 0; width: 600px; background-color: #AAFFAA; } |
コンテンツが短いときは、containerで指定した背景で埋められて、最下部にフッターが表示されます。
表示例２[コンテンツが長いとき]
最上部
コンテンツが長いときは、mainで指定した背景が伸びて、
スクロールした先の最下部にフッターが表示されます。
以上で目的が達成できました。 ほかにもテンプレートになりそうなよくあるパターンをいくつかアップしようと思います。
0 件のコメント:
コメントを投稿