CSSの構成で画面の高さを調整する方法

2012/09/27 17:50

このQ&Aのポイント

HTMLとCSSでの練習中に、画面の高さを均一に調整する方法について困っています。
ヘッダー、コンテンツ、フッターの構成で制作していますが、headerの高さとmainの高さが解決できません。
CSSでの調整方法を教えていただけないでしょうか。可能であれば、javascriptを使用せずに解決したいです。

puhui
お礼率34% (112/329)

CSS
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/09/27 18:53 回答No.1

質問がわかりません。自分でもきちんと整理しないとなにをすればよいかがわからないと思います。 HTML5では文書は原則として <body> 　<header></header> 　<section></section> 　<footer></footer> </body> が最小単位とみなす形になります。　これを基に考えると (1)headerの高さは可変で、　　block要素のheightプロパティのInitial: auto ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-height )ですから、なにもしなくてよい。　　 (2)mainのheightも固定で常にheight上で中央　height上のheightとは何のことでしょう。 (3)footerの位置は固定　なにに対して固定するのですか？　・ウィンドウ　・ページ　・親コンテナブロック (4)footer下の色は背景色　下と言うのは、z-index方向ではなく、画面の上下ですか　footerより下には内容がありませんので、footerより下は画面には表示されません。　ユーザーに意味のないスクロールをさせる、思わせぶりなそのようなデザインはしてはなりません。　縦に長いページや短いページを想定してデザインを決めると良いでしょう。そのときに、サイズや位置が、自身なのか、親なのか、ウィンドウなのかを整理して理解すると、おのずと答えは出るはずです。 8. ボックスモデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html ) 10. 視覚整形モデル詳細 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html )