多くはないけど一定の需要があり、少なくとも自分はちょいちょい必要性を感じている、ブラウザの縦いっぱいの下端にフッターが出るようなレイアウト。
以下のようにしたら出来た。
肝になったのは、
- html要素にheight:100%
- bodyをposition:relative, height:100%
- footerをposition:absoluteでbottom:0
- headerにマージンをとらない
最後のheader（headじゃなくて、body内のヘッダーパート）のマージンがちょっとハマった。上端にナビゲーションを絶対位置で置いた都合、headerにmargin-top:20pxを指定していたのだが、そうするとbodyが100%からマージン分だけ伸びてしまってスクロールバーが出たり、変な余白が出来たりした。ので、headerのマージンはなくしてpadding-topを入れて、header内部のコンテンツをdivでまとめて下にずらした。
＊ ＊ ＊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>縦が100%で下端にフッターが常にあるレイアウト</title>
<style type="text/css">
html{
height:100%;
}
body{
position:relative;
margin:0;
padding:0;
height:100%;
background-color:#cdc;
}
header{
padding-top:20px;
}
header > div{
boder-bottom:1px solid #000;
background:linear-gradient(#999,#ccc);
height:42px;
}
main{
border:1px dotted green;
background-color:#fff;
}
footer{
position:absolute;
bottom:0;left:0;
margin:0;
height:50px;width:100%;
border-top:1px solid #000;
background:linear-gradient(#ccc,#999);
}
header h1{
display:block;
float:right;
font-size:150%;
}
nav {
position:absolute;
top:0;left:0;
height:20px;
border-bottom:1px solid orange;
background:linear-gradient(#333,#666);
width:100%;
font-size:80%;
}
nav ul{
padding:0;margin:0;
}
nav li{
display:inline;
}
nav a{
color:#fff;
}
section{
border:1px solid #999;
border-radius:1em;
padding:1em;
margin:1em;
}
</style>
</head>
<body>
<header>
<div>
<h1>ヘッダー</h1>
</div>
</header>
<nav>
<ul>
<li><a href="some.html">何かのメニュー</a>
<li><a href="some.html">何かのメニュー</a>
<li><a href="some.html">何かのメニュー</a>
<li><a href="some.html">何かのメニュー</a>
</ul>
</nav>
<main>
<section>
<h1>height:100%</h1>
</section>
</main>
<footer>
footer height:50px
</footer>
</body>
</html>
0 件のコメント:
コメントを投稿