- ベストアンサー
ホームページサブコンテンツが・・・
私の架空鉄道のホームページのサブコンテンツがどうしても、 フッターにくっついてしまい、困っています。 ※ページレイアウトのはcssを使っています。 私はヘッダーにくっついていて、サブコンテンツのテキストの量に応じて下に伸びて行ってほしいのですが・・・。 私のサイトを見て解決策を教えてください。
- tomoyan412
- お礼率14% (1/7)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
例えばHTMLが下記のようなものであるとき <body> <header> </header> <section> <section> 本文記事 </section> <aside><!-- 本文と直接関係ない記事 --> </aside> </section> <footer> </footer> </body> の場合 html,body{margin:0;padding:0;position:relative;height:100%;} section{min-height:600px;position:relative;padding-bottom:100px;} body>section>section{margin-left:20%;min-width:0;padding:bottom:0;} section aside{width:20%;position:absolute;top:0;right:0;height:100%;} footer{height:100px;position:absolute;bottom:0;left:0;} [HTML4.01]ですと <body> <div class="header"> </div> <div class="section"> <div class="section"> 本文記事 </div> <div class="aside"><!-- 本文と直接関係ない記事 --> </div> </div> <div class="footer"> </div> </body> の場合 html,body{margin:0;padding:0;height:100%;position:relative;} div.section{min-height:100px;position:relative;padding-bottom:100px;} body>div.section>div.section{margin-left:20%;min-width:0;padding:bottom:0;} div.section div.aside{width:20%;position:absolute;top:0;right:0;height:100%;} div.footer{height:100px;position:absolute;bottom:0;left:0;width:100%;height:100px;overflow:hidden;} あるいは、子供セレクタ(>)を理解しないブラウザへの後方互換のため html,body{margin:0;padding:0;position:relative;height:100%;} div.section{min-height:600px;position:relative;padding-bottom:100px;} body div.section div.section{margin-left:20%;min-width:0;padding:bottom:0;} body div.section div.section div.section{margin-left:0;} div.section div.aside{width:20%;position:absolute;top:0;right:0;height:100%;} div.footer{height:100px;position:absolute;bottom:0;left:0;} むやみやたらにidやclassを付ける必要はありません。 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 むやみやたらに使わない。他の文書構造を示す適したタグがあればそれを使う。無いときにはじめてidやclassを使う(基本classです) HTML5では、この混乱を招いた反省から新しい要素となりました。 header 文書のヘッダやarticle内のヘッダ section 本文 本で言うと節、章、項・・、内部に見出し<h1>から<h6>をひとつだけ持つ footer 文書のフッタ aside 本文と関係ない記事 article header,section,footerを持ちうる完結した記事 figure 挿絵の様に他から参照される記事 など、HTML4.01で作成するときのdivにつけるclass名として参考になります。 HTML5ではDIVを使用する機会は格段に減少するでしょう。
