![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.4ベストアンサー
- 回答日時:
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の高さとした場合です。
<!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>
No.3
- 回答日時:
jqueryも代表的なjavascriptですから、使えないですね。
CSS3,HTML5の時代ですから、私も基本的にjqueryもjavascriptは使いません。セキュリティの関係でjavascriptを止めているネットサーファーも多いのでね。ここで、height,widthは、ウィンドウ幅を参照することに注意が必要です。
で、具体的に何をしたいの??
データが、表示領域内に表示できないときはどうするの??
ユーザーが製作者と同じ環境とは限りません。小さなディスプレイもあれば大きなディスプレイもあるけど・・・
なお、#headerとか#contentとかは、そろそろやめましょう。
20年前の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;}
だけで済むはずだけど(^^)
No.2
- 回答日時:
No.1の補足です。
#contentにheight:100%;当てているなら、padding-topが当たるとその分飛び出すのでパニックになると思いました。
そういう場合はbox-sizing:border-box;を当てるとよいです。理由は調べてくださいまし。
No.1
- 回答日時:
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)。という感じです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
css初心者 フレックスボックス...
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
【スタイルシート?】同行内で...
-
テキストボックスの高さを可変...
-
レスポンシブコードの意味なの...
-
safariだけ、cssが効きません!
-
CSSでborderの指定を解除する記...
-
背景が下まで表示されないんです。
-
CSS(0の単位)について
-
【HTML&CSS】フッター下部の余...
-
form input テキストを上下中央...
-
指定したborderの一部が表示さ...
-
定義リストに下線をつけたいと...
-
CSSでボックスのheightが0になる
-
ブロック要素のボーダーについ...
-
ページ内リンクがずれてしまう
-
CSS:animation開始位置の設定
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
CSS:animation開始位置の設定
-
【CSS】ヘッダーの高さが不明の...
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
<div>と<div>の間の10px程の...
-
HTMLのiframeの入れ子について
-
余分な縦スクロールバーが出て...
-
HTMLで一部だけスクロールする...
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
おすすめ情報