プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

画像のようなことをしたいです。
height:100%で、画面をスクロール、動かさないようにして表示したいのですが、ヘッダーの高さが指定されていないので、うまくいきません。

#contentはこのような場合、どうやってCSSを指定すれば『画面の高さ - #headerの高さ』のサイズになるのでしょうか？

できればJavaScriptやjQueryは使用しないで、CSSのみでお願いします。

「【CSS】ヘッダーの高さが不明の時、コン」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： debu120t
  • 回答日時：

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の高さとした場合です。

<!doctype html>
<html>
<head>
<style>
* {
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;
}
</style>
</head>

<body>

<div id="header">
<h1>TITLE</h1>
</div>

<div id="content">
</div>

</body>
</html>
    • good
    • 3
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

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-html4 … )」でしたし、HTML5では、それをいつまでも理解できない人が多いために、文書構造をマークアップするための新しい要素が追加されたのはご存知だと思います。
　HTML4.01の時代
<div class="header">
<div class="section">
だったものが・・・ちなみにいずれも文書中に何度も登場するはずなのでclass
<header>
<section>
<footer>
になり、divは原則使わなくなった。

また、CSS2移項、セレクタは起点セレクタから書きはじめる。

で、そのままなら単純に
body{height:100%;overflow:hidden;background-color:yellow;}
だけで済むはずだけど(^^)
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： debu120t
  • 回答日時：

No.1の補足です。


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

No.1

  • 回答者： debu120t
  • 回答日時：

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）。という感じです。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

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

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報