【CSS】ヘッダーの高さが不明の時、コンテンツの高さの指定について

Question

画像のようなことをしたいです。
height:100%で、画面をスクロール、動かさないようにして表示したいのですが、ヘッダーの高さが指定されていないので、うまくいきません。

#contentはこのような場合、どうやってCSSを指定すれば『画面の高さ - #headerの高さ』のサイズになるのでしょうか？

できればJavaScriptやjQueryは使用しないで、CSSのみでお願いします。

debu120t · Accepted Answer

No.３の方が言われていることが気になったので補足です。質問者さんが具体的にやりたいことは伝わっているので問題ありませんよ。やりたいことは、#headerの高さをJSなしで取得し、#contentからその高さを引くにはどうしたらいいか、です。 JS（Jqueryでもなんでもいい）をできれば使いたくない、ということが条件なのでCSSのみで限りなく再現できる方法と、”できれば”とあるので余力があればJSの例を回答すればいいのです。ユーザビリティについても触れられていますが、そんなことは質問とは別です。マークアップに関しても指摘されていますが、divを使っている、とは質問者さんも一言も書いてないので気にしなくてよいです。 divを使おうがheaderを使おうが自由です、質問者さんの環境はHTML4かもしれませんし、環境はわかりません。idを指定するのも自由です。とにかく、自由にやってみてください。もしそれでも本格的にHTMLを覚えたければ、正しい書き方をぜひ勉強してください。で、解決方法ですが、経験上、#header高さが固定できない場合は、JSで引くことになると思います。もしくは#headerの高さを固定できれば（あるいはおよそわかっていれば）calcを使ってもいいかもしれません。下のHTMLをコピペしたHTMLファイルをつくって確認してみてください。こういうのをやりたかったんですかね？ ※height: calc(100% - 60px);の60pxが#headerの高さとした場合です。

ORUKA1951 · Answer

jqueryも代表的なjavascriptですから、使えないですね。CSS3,HTML5の時代ですから、私も基本的にjqueryもjavascriptは使いません。セキュリティの関係でjavascriptを止めているネットサーファーも多いのでね。ここで、height,widthは、ウィンドウ幅を参照することに注意が必要です。で、具体的に何をしたいの？？データが、表示領域内に表示できないときはどうするの？？　ユーザーが製作者と同じ環境とは限りません。小さなディスプレイもあれば大きなディスプレイもあるけど・・・なお、#headerとか#contentとかは、そろそろやめましょう。２０年前のHTML4.01の時代に「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」でしたし、HTML5では、それをいつまでも理解できない人が多いために、文書構造をマークアップするための新しい要素が追加されたのはご存知だと思います。　HTML4.01の時代

debu120t · Answer

No.1の補足です。
#contentにheight:100%;当てているなら、padding-topが当たるとその分飛び出すのでパニックになると思いました。
そういう場合はbox-sizing:border-box;を当てるとよいです。理由は調べてくださいまし。

debu120t · Answer

JavaScriptを使えないのはなんで？と聞きたくなりますね。（いじわる！）
Jquery で書けば簡単です。
$(function(){

$(window).on("load",function(){
$("#content").css({"padding-top":$("#header").height()+"px"});
});

});

それでもどうしてもなにがなんでもCSSでやりたいんだったら、、
#headerの高さをheightで指定するか現在の高さを計測して、（F12押して開発者ツール使ってもいいし、スクリーンショット撮ってPhotoshopでピクセル数えてもいいし笑）
その数値を#contentのpadding-topにでも当てればいいんじゃないでしょうか？

ちなみに#headerの高さのところで「font-sizeで高さを指定しているので」のようなことが書いてありますが、
line-heightを指定して、それとpaddingの上下を足すと高さが出るんじゃないですか？
#header {
padding:20px 0;
}
#header h1{
margin:0;
line-height:20px;
font-size:16px;
}
ヘッダーの高さは60px（padding上20+padding下20＋line-heightの20）。という感じです。

【CSS】ヘッダーの高さが不明の時、コンテンツの高さの指定について

No.３の方が言われていることが気になったので補足です。

jqueryも代表的なjavascriptですから、使えないですね。

No.1の補足です。

JavaScriptを使えないのはなんで？と聞きたくなりますね。

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング