
基本構造
ページの構成も今現在では、色々なテンプレートが数多くありますが、今回は、比較的シンプルな1カラム3段構成について考えてみたいと思います。 下記のソースコードを基本として使います。<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>header-footer-template</title>
<link rel="stylesheet" href="frame.css" />
</head>
<body>
<div class="header">Header</div>
<div class="contents">Contents</div>
<div class="footer">Footer</div>
</body>
</html>
html,body{
width:100%;
height:100%;
}
.header{
width:100%;
height:50px;
background-color:#FAA;
}
.footer{
width:100%;
height:100px;
background-color:#AAF;
}
.contents{
width:100%;
min-height:300px;
background-color:#FFA;
}

フッタ下付きの条件
ヘッダ部 コンテンツ部 フッタ部 この3段構成は、ホームページの基本で一番スタンダードな形ですが、この場合にヘッダをfixedとさせる仕様もありますが、今回はこの3要素はstaticとしてscrollさせる仕様で考えます。 通常のホームページであれば、ヘッダとフッタ部分は、サイズ固定として考えられますが、コンテンツ部はサイズ可変が一般的です。 コンテンツ部分は、すご〜く長くなるケースもあれば、テキスト数行の超短いケースも考えられます。 また、構築中などにおいて、空白ページという可能性もあり,、この際に問題になるのが、フッタの定位置です。 上記のサンプル画像を見て分かる通り、ページ構成を全てstaticで作った場合に、フッタはコンテンツ部分の下付きになりますが、サイズが小さい場合にフッタは画面下部ではなく、中央部や上部に表示されてしまいます。 コンテンツサイズが大きい場合は問題ではないのですが、こうした場合にどのようにすればいいのでしょう?コンテンツ部の最小サイズを決める
CSSで簡単に行う場合は、コンテンツ部分の最小値をcalc機能を使ってセットします。html,body{
width:100%;
height:100%;
}
.header{
width:100%;
height:50px;
background-color:#FAA;
}
.footer{
width:100%;
height:100px;
background-color:#AAF;
}
.contents{
width:100%;
min-height:calc(100% - 50px - 100px);
background-color:#FFA;
}

要点解説
cssの冒頭に記述している、heightの100%はおまじないだと思って記述してください。 ※この指定が無いと、それ以下のDOM構造でheightの値が正常に取得できなくなります。html,body{
width:100%;
height:100%;
}
次にサンプル画像を見て気がつくのは、何故かスクロールバーが表示されているという点です。
これを回避するには、bodyなど、基本要素のmargin,paddingを徹底的に無くすという事で、以下のように書いてみました。
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}

See the Pen footer-position by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿