みんなの「教えて（疑問・質問）」にみんなで「答える」Q&Aコミュニティ

@niftyトップ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう！

質問する

マイページ

ログイン

はじめての方へ | FAQ

<< 前の質問 | 次の質問 >>

解決済みの質問

お世話になっております。

お世話になっております。

CSSでサイトを構築しようと考えております。
その際にコピーライト部分を〈address〉～〈/address〉タグで
囲み、その部分をページの最下部に表示したいのですが
それが出来ずに悩んでおります。

よく『containerの全長（例えば500px）のheightを指定して、main（450px）とfooter(50px)でそれぞれにも
高さを指定すればよい』との解答を見かけますが、私が考えるのは
もっと単純に『ページの最下部に表示』をしたいのです。

例えばテーブルタグを使えば【vertical-align: bottom】で
簡単に実践できますがこの表現方法はスマートとは言えません。

過去ログを検索したところ・・・
http://okwave.jp/qa/q2859912.html
の質問サイトに私と全く同じ症状に悩み、解決した方への回答が
あるのですが、解答と同様に私のサイトにタグを適用しても解決出来ず困っております。

【index.html】
（--ページヘッダは省略--）

<title>タイトル</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>
</head>
<body>

<div id="container">

<div id ="header">
<h1>こんにちは</h1>
</div>

<ul>
<li><a href="index.html">top</a></li>
<li><a href="schedule.html">schedule</a></li>
</ul>

<div id="main">
<h2>Welcome!!</h2>
</div>
<address>Copyright©</address>
</div>

</body>
</html>

【style.css】
@charset "utf-8";body , html { height: 100%;}

body{color: #444444;}

div#container{border: solid 2px #aaaaaa;
padding: 20px;
width: 500px;
height: 100%;
background-color: #ffffff;
margin-left: auto;
margin-right: auto}

div#header{background-color: #111111;
padding: 5px 20px;}

h1{font-size: 1.25em;
font-family: Verdana, Helvetica, sans-serif;
color: #66aa66}

h2{font-size: 1em;
padding-left: 20px;
padding-bottom: 3px;
maragin-bottom: 10px;
border-bottom: solid 2px #999999;
background-image: url(freeback65.gif);
background-repeat: no-repeat}

ul{list-style-type: none;
margin-left:0;
background-color: #888888;
padding-left:0;
padding:3px 20px}

li{display: inline;
padding-right: 10px;
color: #ffffff}

li a{text-decoration: none;
color:#ffffff}

li a:hover{background-color:#bbbbbb}

p{font-size: 0.75em;
padding-left:10px}

address{font-size: 0.625em;
font-weight: bold;
font-style: normal;
color: #2d444f;
text-align: center;
text-valign: bottom;}

この状態でwebで見ますと、肝心のアドレス部分は#container内の
<p>タグの直下に表示されます。私の希望としましてはcontainer内の
一番下に表示されるのが理想です。

ご教授よろしくお願いいたします。