タイトルどおりですが・・・
frameやiframeを使わずに上下2分割させ、50%ずつ固定にしたいのですが、うまくいきません。
高さ100%は
http://black-flag.net/css/20110621-3232.html
で再現できたのですが、この中にheight:50%のdivを切ろうとしても上に詰まってしまいます。
表現する方法はあるでしょうか。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS HEIGHT 100% SAMPLE</title>
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
body {
font-size: 100%;
line-height: 160%;
font-family: Arial,Helvetica,sans-serif;
color: #000;
text-align: center;
background: #cccccc;
}
#container {
margin: 0 auto;
width: 800px;
height: 100%;
min-height: 100%;
text-align: left;
background: #fff;
}
body > #container {
height: auto;
}
.half{
margin:0 auto;
min-height:50%;
height:50%;
width:800px;
}
#container > .half {
height: auto;
}
</style>
</head>
<body>
<div id="container">
<div class="half">
<div>
上のコンテンツ。固定にしたい
</div>
</div>
<div class="half">
<div style="overflow:scroll">
下のコンテンツ。スクロールさせたい
</div>
</div>
</div><!--/#container-->
</body>
</html>
No.1ベストアンサー
- 回答日時:
★HTMLはデザインのために書いたらダメ!!!--基本中の基本で、最も大事な基本です。
文書構造とプレゼンテーションの分離は、HTML4.01の勧告以来十数年にわたって強く言われ続けてこられたのに、いまだに、それを理解していない説明サイトが多いですね。参考にされたページは、class名のつけ方も含めて参考にはならないですね。少なくとも仕様書を読んだ形跡がない。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』どのようなclass名がよいかは、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )が参考になります。contenerとかhearfなんて、文書構造じゃなくプレゼンテーション(デザイン)用ですね。
本題です。
CSSでは、ウィンドウの幅と高さを参照します。divの高さ,幅のデフォルトはautoです。
よって、htmlとbodyに高さ幅を100%と指定し、それをposition:relative;にすると、その子孫は「直近のstatic以外の親コンテナブロックのサイズを参照する。」より、簡単に指定できるはずです。
【引用】____________ここから
パーセント値は、常に長さなど他の値に対する相対値である。 パーセント値を取ることができるプロパティには、それぞれ参照先の値も定められている。 参照先の値には、同じ要素の別のプロパティ、祖先要素のプロパティ、整形文脈に関わる値(包含ブロックの幅など)などがある。 パーセント値がルート要素に用いられ、かつその値がプロパティの継承値を参照する場合、継承値の代わりに初期値を参照する。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
【引用】____________ここから
初期包含ブロックの高さはルート要素の'height'プロパティで指定するとよい。 このプロパティが値'auto'を取る場合、初期包含ブロックの高さは文書の内容量に合わせて変化することになる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )]より
ごく簡単な例を挙げておきます。
・HTML(class名を含めて)には文書構造しか書かれていませんから、デザインをどのようにも変更できます。
・印刷には不向きですから、screenメディアのスタイルシートです。
・Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
のDATAでチェック済み
・footerを一番下に、headerとsectionを上下二つでも良いでしょう。
★タブは_に置換してあるので戻すこと。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;height:100%;width:100%;position:relative;}
div.header{position:absolute;z-index:10;height:60px;width:100%;}
div.section{position:absolute;height:50%;top:0;left:0;width:100%;overflow:auto;}
div.section h2{margin-top:60px;}
div.footer{height:50%;position:absolute;bottom:0;width:100%;overflow:auto;}
div.header{background-color:aqua;}
div.section{background-color:yellow;}
div.footer{background-color:lime;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>frameやiframeを使わずに上下2分割させ、50%ずつ固定にしたいのですが、うまくいきません。</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
[HTML5]
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<!--[if IE]>
_<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
_<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->_<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
html,body{margin:0;padding:0;height:100%;width:100%;position:relative;}
header{position:absolute;z-index:10;height:60px;width:100%;}
section{position:absolute;height:50%;top:0;left:0;width:100%;overflow:auto;}
section h2{margin-top:60px;}
footer{height:50%;position:absolute;bottom:0;width:100%;overflow:auto;}
header{background-color:aqua;}
section{background-color:yellow;}
footer{background-color:lime;}
-->
</style>
</head>
<body>
_<header>
__<h1>タイトル</h1>
_</header>
_<section>
__<h2>見出し</h2>
__<p>高さ100%は再現できたのですが、この中にheight:50%のdivを切ろうとしても上に詰まってしまいます。
表現する方法はあるでしょうか。</p>
_</section>
_<footer>
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
__<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</footer>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
歩いた自慢大会
「めちゃくちゃ歩いたエピソード」を教えてください。 長時間でも長距離でも結構です。
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
フレームを使わずに画面分割したいです
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
<!-- #BeginLibraryItemとは
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
ヘッダーを左右に二分割する方...
-
html リストのマークについて
-
HTML文について… 昨日習い始め...
-
h1のテキストサイズよりh2の方...
-
テーブルの隙間について
-
ローカルとWeb上で見え方が違う...
-
MySQL使用スレッド掲示板の仕組...
-
スペースを使わず文字位置を揃...
-
HTMLの禁則処理解除について
-
<div>で改行させない方法
-
CSSで、contentsがfooterに重な...
-
【CSS】HTML直書き→外部ファイ...
-
HTMLパーツとは何ですか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報