- ベストアンサー
カラムの高さの調整方法
- 本文の領域の高さをメニュー領域の高さに合わせる方法をご紹介します。
- メニューの高さを本文領域の高さに合わせる方法をご紹介します。
- メニューの数でメニュー領域の高さを等分する方法をご紹介します。
- ujicha0909
- お礼率51% (76/148)
- CSS
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＞本文領域の高さが1000pxを超えて1500pxになったらメニュー領域も1500pxになります。そうしたら各メニューのブロックは150pxづつ等割になります。 position:absoluteですから、その子供のブロック要素はサイズを参照できますからheight:10%でよいです。 サンプルは、とても簡単で、かつウェブ標準で、当然文書構造も弄らなくて済む方法。 ★Another HTML-lint gateway ( http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 ※タブは＿に置換してありますから元に戻すこと。 サンプル見てもわかるように、でも変じゃない？？。 本文が長いと、メニューが「だら～ん」と長くなって利用し辛くなる。 <!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> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{margin:0 auto;min-width:640px;max-width:800px;width:70%;border:solid 1px gray} div.section{position:relative;} div.section div.nav{position:absolute;top:0;left:0;width:20%;height:100%;} div.section div.nav ol,div.section div.nav ol li{ ＿display:block;list-style-type:none;margin:0;padding:0;text-align:center; } div.section div.nav ol{height:100%;} div.section div.nav ol li{background-color:red;height:10%;} div.section h2, div.section div.section{width:78%;margin-left:21%;margin-right:1%;min-width:0;clear:all;} div.section div.figure{width:200px;float:right;} /* わかりやすくするため */ body{background-color:gray;} div.header,div.section,div.footer{border:solid 1px gray} div.header{background-color:aqua;} div.section{background-color:lime;} div.footer{background-color:fuchsia;} div.section div.section{background-color:yellow;} div.section div.nav{background-color:silver;} div.section div.figure{background-color:white;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section" id="S1"> ＿＿<h2>本文</h2> ＿＿<div class="section" id="S1-1"> ＿＿＿<h3>第１項</h3> ＿＿＿<div class="figure"> ＿＿＿＿<p>挿絵</p> ＿＿＿</div> ＿＿＿<p>2カラムのサイトを外部CSSを使って記述しているのですが、左にメニュー(ナビゲーション)の領域があり、右に本文(コンテンツ)の領域があります。</p> ＿＿＿<p>このメニューの領域と本文の領域の高さで質問があります。</p> ＿＿＿<p>本文の長さがマチマチで、長い時もあれば短い時もあります。本文の長さが短い場合は本文の領域の高さが低くなり、本文が長い場合は高くなります。</p> ＿＿</div> ＿＿<div class="section" id="S1-2"> ＿＿＿<h3>第２項</h3> ＿＿＿<div class="figure"> ＿＿＿＿<p>挿絵</p> ＿＿＿</div> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="S1-3"> ＿＿＿<h3>第３項</h3> ＿＿＿<div class="figure"> ＿＿＿＿<p>挿絵</p> ＿＿＿</div> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section" id="S1-4"> ＿＿＿<h3>第４項</h3> ＿＿＿<div class="figure"> ＿＿＿＿<p>挿絵</p> ＿＿＿</div> ＿＿＿<p>記事</p> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="nav" id="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#S1-1">１項</a></li> ＿＿＿＿<li><a href="#S1-2">２項</a></li> ＿＿＿＿<li><a href="#S1-3">３項</a></li> ＿＿＿＿<li><a href="#S1-4">４項</a></li> ＿＿＿＿<li><a href="#S1-5">５項</a></li> ＿＿＿＿<li><a href="#S1-6">６項</a></li> ＿＿＿＿<li><a href="#S1-7">７項</a></li> ＿＿＿＿<li><a href="#S1-8">８項</a></li> ＿＿＿＿<li><a href="#S1-9">９項</a></li> ＿＿＿＿<li><a href="#S1-10">10項</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
肝心なこと忘れてました。 「メニューを１０分割」と言う時点で、最低限の高さは絶対に必要になりますから、本文にdiv.section{min-height:100px;} div.section{min-height:0;} を入れておかないと・・・ それで 「本文が短くてもメニューの高さに合わせて」 「本文が長いときはメニューがそれに合わせて」 を両立できます。
お礼
回答ありがとうございます。 急にPCの前に座る時間が確保できなくなり、 回答を試す時間がなくなりまして。 後程試させて頂きます。
- DrFell
- ベストアンサー率55% (305/551)
要は表の様にというイメージだと思うのですが、それなら表の様にという価を指定すればできます。 この価はCss2からの物でそろそろ現実的かと思います。IE6等を視野に入れなければ使えます。 <style type="text/css"> body { background:#cccccc;/*コンテンツと視覚的に分けるため*/ } .contents{ display:table-row;/*テーブルの行の様にディスプレイする*/ background:#ffffff; } .contents>div{/*contents直接の子（孫は関係なし）*/ display:table-cell;/*テーブルのセルの様にディスプレイする*/ vertical-align:middle;;/*テーブルの行の中央に配置する*/ padding:2em; } </style> <!-- HTMLソース --> <div class="contents"> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div> <p>ああああああああああああああああああああ</p> <p>いいいいいいいいいいいいいいいいいいいい</p> </div> <div> <ul> <li>1</li> </ul></div> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div>
お礼
回答ありがとうございます。 急にPCの前に座る時間が確保できなくなり、 回答を試す時間がなくなりまして。 後程試させて頂きます。
補足
先ほど試してみました。 両脇にナビゲーションメニューがあるのと、 .contents>div{/*contents直接の子（孫は関係なし）*/ の部分が解釈できず迷ってしまいました。 多分、私の質問の方向性が悪かったのだと思います。 一度閉じて質問の仕方を変えて質問させて頂きます。
- pofhal
- ベストアンサー率0% (0/1)
通りがかりの者です。 あなたが求める結果と違っていたらすいませんなのですが、 左右のカラムに収まっている文章や画像のボリュームが 同じではなくても、左右のカラムをDIVで囲い、そのDIVに 上手いこと背景画像をセットする事で「左右のカラムが 同じ高さに見える」ようにする事は可能です。 以下の参考URLに詳しい方法が載っていました。 僕もよく使う手ですので、もし以下のページを読んでも ちょっと分からんわぁ～って感じでしたら、また言って いただければ、少しはお役に立てるかも知れません。 がんばってください。
お礼
回答ありがとうございます。 急にPCの前に座る時間が確保できなくなり、 回答を試す時間がなくなりまして。 後程試させて頂きます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
等割とはどういう意味でしょうか？ いずれにしても、その中身のmarginで指定すれば良いかと <body> <div class="header"> </div> <div class="section"> <h2>見出し</h2> <p>記事</p> <div class="contentTable"> <ol> <li></li> <li></li> </ol> </div> </div> <div class="footer"> <h2>フッタ</h2> </div> </body> てしたら div.header,div.section,div.footer{width:80%;margin:0 auto;} div.section{position:relative;min-height:300px;} div.section div.contentTable{position:absolute;top:0;left:0;width:50%;} div.section>*{margin-left:50%;} とかでよいはずです。 参考 ※floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7079628.html ) ※clearfixが出来ません… - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7334820.html )
補足
メニュー領域の高さの最小が1000pxとして、 10個のメニューで等割にすれば100pxづつですが、 本文領域の高さが1000pxを超えて1500pxになったらメニュー領域も1500pxになります。 そうしたら各メニューのブロックは150pxづつ等割になります。 全体が変化してもそれぞれのブロックが等しく分割されたようにしたいと思いまして。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
双方に、相手の高さを適用させる方法はありません。通常は、static以外の直近の親コンテナブロックのサイズを参照して指定します。(親コンテナブロックにはmin-heightを設定しておく) メニューの量が異なる場合は、<head></head>内のスタイルシートでmon-heightを指定すると良いでしょう。また、bodyまたはsectionに対してclassで指定しても良いでしょう。 「その都度変わる高さをメニューの数で等分するする事は出来るでしょうか？」のは、親コンテナブロックの高さの%指定で可能ですが、ブロックの寸法はpadding辺の内側ですから、borderやpaddingを指定しない形にする必要があります。
お礼
お互いをお互いに参照して高さを変えるのは不可能ですか。。 やはり、どちらかを最低限の高さに設定して、 相手がその高さを超えると延びるようにするしかないですよね。。。。 子ブロックにpaddingを設定してる(したい)ので、 その辺を含めて等割にしたいと考えてるのですが難しいですよねぇ。 回答ありがとうございました。
お礼
先ほど試してみました。 確かにメニューが間延びするのは良くない感じです。 質問の回答という事では良い感じでしたのでベストアンサーとさせていただきますが、 右の本文の中に項目が入っているのを本文に本文内容を記述し、 項目の領域を削除したらフロートが落ちたのと、 本文が領域からはみ出してしまいました。 なのでちょっとそのまま改造して使うのが難しいです。 別の質問が生じてしまいましたので一度閉じて質問の仕方を変えて質問させて頂きます。