- ベストアンサー
<adress>をページの一番下に配置するには
こんにちは。 CSSでサイトを作成しているのですが、ページの最後に著作権情報を入れたいのです。 ただ入れるなら最後に<adress>を挿入するだけなのでできるのですが、ページサイズを指定した場合ページの一番下に入れることができません。 abusoluteでいろいろ試しましたがどうもうまくいきません。 （例） ページサイズ８００pxで統一しています。 しかし内容が４００pxしかない為<adress>を最後に入れると４００pxのところで挿入になります。 これを常に８００pxのところで表示させたいのです。 もっと言えば仮にサイズが９００pxになったとしても自動的に最後になるようにできますか？ わかりにくい説明ですがお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>himajin</title> </head> <body> <div style="height:800px;"> <!-- body要素内のaddress要素以外をdivで挟んでCSSを使う。なお、外部CSSを作ってmeta要素でインポートするのが面倒なのでstyle属性で許してね--> <p>あいうえお</p> </div> <address>****@****.com</address> </body> </html> とかやったら普通に出来ましたが...Firefox 1.6a1 [2005111403]
その他の回答 (3)
- goldfox
- ベストアンサー率49% (123/249)
<style type="text/css"> <!-- .contents { ～省略～ position:relative; top:0px; left:0px ; } address { position:absolute; bottom:10px; left:10px } --> </style> 高さが決まっているブロックの中でなら、これでいけると思います。
- partita
- ベストアンサー率29% (125/427)
800pxのブロックにborder属性がある場合（罫線で囲んでいる場合など）や、背景画像がある場合は、 <div id="wrap"> <div style="height:785px">内容</div> <address style="height:15px">著作権</address> </div> のように、全体をさらに囲むといいです。 で、#wrapにスタイルを適用。
お礼
回答ありがとうございます。 できました～。 こんなやり方もあるんですね。
#1です。失礼、meta要素じゃなくてlink要素ですね
お礼
回答ありがとうございます。 すいません。言葉足らずでした。<(_ _)> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>例え</title> <style type="text/css"> <!-- .contents { background-color: #FFFFFF; margin: auto; padding: 0px; width: 800px; height:800px; border: 1px solid #000000; text-align:left; } --> </style> </head> <body> <div class="contents"> <h1>例え</h1> <address>住所-住所</address> </div> </body> </html> こんな感じです。 <div class="contents">の一番下に常に<address>をもってきたいのです。 方法はありますか？
お礼
回答ありがとうございます。 できました～。 position:relative; top:0px; left:0px ; を入れることで何故そうなるのかはわかりませんが・・・。勉強します。