2017/07/19

CSS備忘録 コンテンツが短いときは最下部に固定されるフッター

HTMLの編集をしていく中でCSSの勉強が必要になってきたんですが、
この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;
}
表示例1[コンテンツが短いとき]

コンテンツが短いときは、containerで指定した背景で埋められて、最下部にフッターが表示されます。

表示例2[コンテンツが長いとき]
最上部
最下部

コンテンツが長いときは、mainで指定した背景が伸びて、
スクロールした先の最下部にフッターが表示されます。

以上で目的が達成できました。 ほかにもテンプレートになりそうなよくあるパターンをいくつかアップしようと思います。

0 件のコメント:

コメントを投稿

AWSに手を出してフレームワークも使ってみたが・・・。

サイトを作り直しました。 AWS上に構築した Content created by AXY を作り直しました。 具体的にはbottle.pyを使ったpythonで構築したサイトからPHP7を使用したサイトに再構築しています。 特別何か問題点があったというわけで...