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

2023/09/04 21:59

このQ&Aのポイント

frameやiframeを使わずに上下２分割させ、50%ずつ固定にする方法はありますか？
高さ100%は再現できたが、divを切ると上に詰まってしまいます。
表現する方法はありますか？

ベストアンサー

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

2013/06/14 16:47

タイトルどおりですが・・・ 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-transitional.dtd"> <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>

umioyo
お礼率78% (172/220)

CSS
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/06/16 14:13 回答No.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">  ＿</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>

関連するQ&A

ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css">  </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
CSSでのセンタリング
いつもすみません。下記のラインをimg（gif）で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか？よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</div> </body> </html> ※回答の際には上記タグを改良してお答え願います。
- ベストアンサー
- HTML
div入れ子による height100%
お世話になります。親要素のdivは縦100%になるのですが、入れ子のdivが縦100%にならず困っております。検証ブラウザは、IE6、IE7、FF2、Safariです。お分かりの方、ご教授をお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>test</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="contents"> テスト <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </div> </body> </html>
- ベストアンサー
- CSS
DreamWeaverでのスタイルシート適用後のプレビューについて
最近やっとDreamWeaverを購入してテーブルからCSSデザインに乗り換えようと奮闘中のものです。外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 HTMLのほうに、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </html> と書きプレビューしてみたのですがスタイルシートが適用されません。デザインビューでは適用されているのですが、、、何が原因なのでしょうか?
- ベストアンサー
- ホームページ作成ソフト
HTMLで○や■などをテキストの代用とした時
HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？教えてください。よろしくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css">  </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。下記のソースでhtmlを制作しましたが、#headerの上に余白があります。どうすればこの余白をとる事が出来るでしょうか？お教え頂ければと思います。 ↓ソース↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
ホームページをセンターに表示したい！！
DreamweaverCS3を使ってホームページを作成しています。ホームページをセンターに表示したく、 marginをautoにしてもセンターに表示されません。いったい何が原因なのでしょうか？？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 中略 <style type="text/css"> td img {display: block;}body { margin:auto; } ↑この部分です。どなたかご教授下さい。
- ベストアンサー
- ホームページ作成ソフト
Operaでズレない方法をご指導下さい
IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。ブラウザの横幅を大きくしたら小さくしたりすると、ズレない場合もあるのですが、最大にすると1pxだけズレます。ズレない良い方法がありましたら、どうか教えて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="main">テキスト</div> </body> </html>
- 締切済み
- HTML
標準モードでのheight:100%,auto
heightについて。標準モードだと、bodyがauto、親要素がautoのとき、子のheightを100%にしてもそれはautoと解釈されると理解しています。作りたいのは、テーブルの、 table自体は高さauto tdの中のdivは高さ100% なんですが、「標準モードだと」なかなかうまく行きません。 ↓こんな感じで作ってみたものの、これはtableの高さが100%です。 tableの高さを自動にすることはできないのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <style type="text/css"> html,body { height:100%; } </style> <table border="1" style="height:100%;"> <tr> <td style="height:100%;"> <div style="background:#fee;height:100%;">あいうえお</div> </td> <td style="height:100%;"> <div style="background:#eef;height:100%;">あ<br>い<br>う<br>え<br>お</div> </td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
cssでの要素間の余白について。
ホームページを作成しており、画像の下にdivをくっつけて、配置したいのですが、どうやっても、余白が出来てしまいます。styleでdiv要素にmargin-bottom:0、h2にmargin-top:0と記述しても、余白が出来てしまい、困っています。さらにdiv containerの大きさについても、styleでwidth,heightで、大きさを指定しているのですが、横に画面一杯に広がってしまい、大きさ指定が反映されません。初歩的な質問かもしれませんが、どこに問題がありますでしょうか？ご教授お願いいたします。 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxxxxxxxxx</title> <style type="text/css"> body {background-color:#f5f5f5} div#container {width="800" height="40";background-color:#fff4d8} h1 {color:#330000;font-family:Geogia,Times New Roman,sans-selif} h2 {color:#330000;font-family:Geogia,Times New Roman,sans-selif;margin-top:0} </style> </head> <body> <div id="content"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" </h1> </div> <div id="container"> <h2> xxxxxxxx </h2> </div> </body> </html>
- ベストアンサー
- CSS