
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も見ています
-
オンライン健康相談gooドクター登場
24時間365日いつでも医師に健康相談できる!詳しくはコチラ>>
-
divのheight指定で画面一杯に表示したい
HTML・CSS
-
複数のボタンを等間隔に、かつ中央に配置する
HTML・CSS
-
swiper.jsでのpaginationのカスタマイズについて
JavaScript
-
4
画像のサイズが変わらない
HTML・CSS
-
5
CSSでボックスのheightが0になる
HTML・CSS
-
6
divタグ内のコンテンツが重なって表示されてしまう。
HTML・CSS
-
7
<tbody>は何のためにあるんでしょうか?
その他(ソフトウェア)
-
8
onClickに複数の関数を挿入する方法
JavaScript
-
9
リストの左余白の削除方法
HTML・CSS
-
10
別ファイルのfunctionの読み込み方
JavaScript
-
11
左○○px、右は残りの幅(100%-左px)ってできますか?
HTML・CSS
-
12
画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?
HTML・CSS
-
13
cssファイルの名称付け
HTML・CSS
-
14
テーブルセル余白(例えば左側だけ、上側だけ、など)
HTML・CSS
-
15
<form <input type=text"の枠を消せますか?"
HTML・CSS
-
16
ページの左右の余白(枠外)に色を付ける方法
HTML・CSS
-
17
ラジオボタンが両方とも選択できてしまう
HTML・CSS
-
18
JavaScriptで文字列の特定文字以降を取得する方法
JavaScript
-
19
ヘッダーとフッターだけ背景を指定する方法
HTML・CSS
-
20
background-sizeの背景で最小値指定はできますか?
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
人気Q&Aランキング
-
4
<div>と<div>の間の10px程の...
-
5
HTMLで文字が重なって表示されます
-
6
cssで「下よせ」ってどうやって...
-
7
CSS、width100%でもできる余白
-
8
CSSでborderの長さを指定、また...
-
9
HTMLのiframeの入れ子について
-
10
トップに戻るボタン、スマホだ...
-
11
css floatでdivがずれる
-
12
HTMLについて
-
13
htmlの表示
-
14
表示倍率を変えるとレイアウト...
-
15
font-sizeが効かない
-
16
border-style:solidで文字がずれる
-
17
form input テキストを上下中央...
-
18
div内に外部のurlを表示させたい
-
19
余分な縦スクロールバーが出て...
-
20
ネガティブマージン
おすすめ情報