iframeを使わずに上下50%ずつに分割したい

解決済

質問者：umioyo
質問日時：2013/06/14 16:47
回答数：1件

タイトルどおりですが・・・

frameやiframeを使わずに上下２分割させ、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>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2013/06/16 14:13

★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">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>frameやiframeを使わずに上下２分割させ、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">
＿<link rel="stylesheet" href="css/style.css">
<style media="screen">

</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>