- ベストアンサー
iframeを使わずに上下50%ずつに分割したい
- frameやiframeを使わずに上下２分割させ、50%ずつ固定にする方法はありますか？
- 高さ100%は再現できたが、divを切ると上に詰まってしまいます。
- 表現する方法はありますか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
★HTMLはデザインのために書いたらダメ!!!--基本中の基本で、最も大事な基本です。 文書構造とプレゼンテーションの分離は、HTML4.01の勧告以来十数年にわたって強く言われ続けてこられたのに、いまだに、それを理解していない説明サイトが多いですね。参考にされたページは、class名のつけ方も含めて参考にはならないですね。少なくとも仕様書を読んだ形跡がない。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』どのようなclass名がよいかは、HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )が参考になります。contenerとかhearfなんて、文書構造じゃなくプレゼンテーション(デザイン)用ですね。 本題です。 CSSでは、ウィンドウの幅と高さを参照します。divの高さ,幅のデフォルトはautoです。 よって、htmlとbodyに高さ幅を100%と指定し、それをposition:relative;にすると、その子孫は「直近のstatic以外の親コンテナブロックのサイズを参照する。」より、簡単に指定できるはずです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから パーセント値は、常に長さなど他の値に対する相対値である。 パーセント値を取ることができるプロパティには、それぞれ参照先の値も定められている。 参照先の値には、同じ要素の別のプロパティ、祖先要素のプロパティ、整形文脈に関わる値（包含ブロックの幅など）などがある。 パーセント値がルート要素に用いられ、かつその値がプロパティの継承値を参照する場合、継承値の代わりに初期値を参照する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#percentage-units )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 初期包含ブロックの高さはルート要素の'height'プロパティで指定するとよい。 このプロパティが値'auto'を取る場合、初期包含ブロックの高さは文書の内容量に合わせて変化することになる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#containing-block )］より ごく簡単な例を挙げておきます。 ・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を使わずに上下２分割させ、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.js"></script> ＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![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>
