質問: 【css】ヘッダーの高さが不明の時、コンテンツの高さの指定について 画像のようなことをしたいです。 height:100%で、画面をスクロール、動かさないようにして表示したいのですが、ヘッダーの高さが指定されていないので、うまくいきません。 #contentはこのような場合、どうやってcssを指定すれば『画面の高さ - #headerの高さ』のサイズになるのでしょうか? できればjavascriptやjqueryは使用しないで、cssのみでお願いします。
回答: no.3の方が言われていることが気になったので補足です。 質問者さんが具体的にやりたいことは伝わっているので問題ありませんよ。 やりたいことは、#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の高さとした場合です。 * { margin:0; } html,body { height:100%; margin:0; } #header { position:relative; padding:20px; background:#ff0; } #header h1{ line-height:20px; font-size:16px; } #content { position:relative; height: calc(100% - 60px); box-sizing:border-box; background:#ff0000; } title =====