• ベストアンサー
  • すぐに回答を!

CSS 〈address〉タグで囲んだ部分を最下部に表示したい

  • 質問No.6117270
  • 閲覧数845
  • ありがとう数4
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 96% (24/25)

CSS 〈address〉タグで囲んだ部分を最下部に表示したい

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

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&copy;</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-style: normal;
color: #2d444f;
text-align: center;
text-valign: bottom;}


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

ご教授よろしくお願いいたします
(タイトルミスで間違えてマルチ投稿になっちゃいました)

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 73% (71/97)

1.div#containerにposition:relative;を追加。
div#container {
position:relative;/* ←追加 */
border: solid 2px #aaaaaa;
padding: 20px;
width: 500px;
height: 100%;
background-color: #ffffff;
margin-left: auto;
margin-right: auto}

2.addressにposition:absolute;を追加
address {font-size: 0.625em;
font-style: normal;
color: #2d444f;
text-align: center;
position:absolute;/* ←追加 */
bottom:0px;/* ←追加 */
left:0px;/* ←追加 */
width:100%;/* ←追加 */
}
お礼コメント
ice1982

お礼率 96% (24/25)

nekomikekamo様

早速ご解答いただきましてありがとうございます。

教えて頂いた通りにしたところ
見事私の意図したとおりの表示となりました。

原因は私がどうやらpositionの使い方を間違えて
いたからのようです。

本当にありがとうございました。
投稿日時:2010/08/18 10:09

その他の回答 (全1件)

  • 回答No.2

ベストアンサー率 65% (870/1330)

親要素にposition:relativeを指定し、
子要素で、position:absoluteして本来の位置を無効にし、
さらに子要素で、親要素を基準とした、下端、左端、からの
距離を left:XXpx;bottom:XXpx のように指定して配置出来ます。
お礼コメント
ice1982

お礼率 96% (24/25)

yyr446様

ご解答いただきましてありがとうございます。

yyr446様のpositionについての詳細なご説明で
非常に良く理解できました。

解答だけでなく、詳細な説明までしていただきまして
ありがとうございました。
投稿日時:2010/08/18 10:13
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ