• 締切済み

カラムの高さを合わせる

ソース記述の為、長いですがお付き合いください。 http://okwave.jp/qa/q7547642.htmlでした質問を変えたものです。 html5で以下の様に記述しました <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="へのへのもへじ"> <meta name="keywords" content="へのへのもへじ"> <meta name="description" content="へのへのもへじ"> <link rel="stylesheet" href="style.css"> <title>へのへのもへじ</title> </head> <body> <div id="head"> <h1>へのへのもへじのサイト</h1> </div> <div id="container"> <div id="header"><img src="title.png" alt="へのへのもへじ" width="100%" height="120"></div> <div id="menu"> <ul style="list-style-type: none"> <li><a href="index.html">1</a></li> <ul style="list-style-type: none"> <li><a href="index.html">2</a></li> <li class="sub"><a href="index.html">2-1</a></li> <li class="sub"><a href="index.html">2-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">3</a></li> <li class="sub"><a href="index.html">3-1</a></li> <li class="sub"><a href="index.html">3-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">4</a></li> <li class="sub"><a href="index.html">4-1</a></li> <li class="sub"><a href="index.html">4-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">5</a></li> <li class="sub"><a href="index.html">5-1</a></li> <li class="sub"><a href="index.html">5-2</a></li> </ul> </div> <div id="contents"> <p> 本文<br> 本文<br> 本文<br> 本文<br> </p> <p>★</p> <p>本文<br> 本文<br> 本文<br> 本文<br> </p> </div> </div> <div id="footer">フッター</div> </div> </div> </body></html> そしてcssに @charset "UTF-8"; * { margin:0; padding:0; } body { line-height:150% } #head { width:100%; padding:22px; text-align:center; margin:0 auto; font-size:10px; text-decoration:none; } #container { width:900px; margin:0 auto; min-height:1000px; } #header { width:898px; height:120px; margin:0 auto; border-top:solid 1px #000000; border-left:solid 1px #000000; border-right:solid 1px #000000; border-bottom:solid 8px #0000ff; } #menu { float:left; width:148px; min-height:1018px; background-color:#aaffdd; border-top:dotted 1px #666666; border-left:solid 1px #666666; border-right:solid 1px #666666; } #menu a{ display:block; height:100%; padding:11px 9px 11px 9px; margin:0 auto; text-decoration:none; border-top:dotted 1px #666666; background-color:#aaffdd; list-style:none; } #menu li.sub a{ display:block; height:100%; padding:9px 3px 9px 22px; text-decoration:none; font-size:small; font-color:red; border-top:dotted 1px #666666; background-color:#aaffdd; list-style:none; } #menu a:hover{ background-color:#FFE4E1; } #menu li.sub a:hover{ background-color:#FFE4E1; } #contents { float:left; width:731px; min-height:1000px; margin:0 auto; padding:9px 9px 9px 9px; border-top:solid 1px #000000; border-right:solid 1px #000000; text-align:center; background-color:#fce5fd; } #contents p{ margin-top:2em } #footer { clear:both; width:900px; height:100%; margin:0 auto; padding-top:10px; padding-bottom:10px; font-size:small; color:#ffffff; text-align:center; background-color:#555555; } と書きました。 ここで現在のカラムの高さだと本文領域とメニュー領域が合ってるのですが、 本文領域がグーッと延びて、、、 例えば<p>★</p>の部分が「<p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p> <p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p> <p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p><p>★</p>」みたいになったら、 メニュー領域のmin-heightを追い越して長くなります。 この時にメニュー領域が寸足らずになって、 今回で言うと緑の部分が千切れて白い背景の部分になります。 右の本文領域が長くなってもメニュー領域がその長さに付き合って同じ高さに揃えるにはどうしたらいいでしょうか？ また、メニューの5-2の下にborderを引きたいのですが、 現状だとメニュー全体の下に入ってしまいます。 他の各メニューと同じような位置でborderを引くにはどうしたらよいでしょうか？ 宜しくお願いします。

  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

先にも回答しましたが・・ position:absolute; height:100%; で問題ないはずです。 　先の回答・・試されていませんね。floatなんてまったく使ってないのに「項目の領域を削除したらフロートが落ちたのと、」とは如何に？？ 　先の回答の項目を等分割している部分を消すなり固定値に変更すればよいだけです。 　単にコピペするのではなく、理解するようにしましょう。 ＞5-2の下にボーダー引くならulの下にborder引くか、:last-child擬似要素 ★リストの書き方が間違っています。 <div id="menu"> <ul style="list-style-type: none"> <li><a href="index.html">1</a></li> <ul style="list-style-type: none"> <li><a href="index.html">2</a></li> <li class="sub"><a href="index.html">2-1</a></li> <li class="sub"><a href="index.html">2-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">3</a></li> <li class="sub"><a href="index.html">3-1</a></li> <li class="sub"><a href="index.html">3-2</a></li> <ul style="list-style-type: none"> <li><a href="index.html">4</a></li> じゃなくて <div id="menu"> 　　<ul> 　　　　<li><a href="index.html">1</a></li> 　　　　<li><a href="index.html">2</a> 　　　　　　<ul> 　　　　　　　　<li><a href="index.html">2-1</a></li> 　　　　　　　　<li><a href="index.html">2-2</a></li> 　　　　　　</ul> 　　　　</li> 　　　　<li><a href="index.html">3</a> 　　　　　　<ul> 　　　　　　　　<li><a href="index.html">3-1</a></li> 　　　　　　　　<li><a href="index.html">3-2</a></li> 　　　　　　</ul> 　　　　</li> 　　　　<li><a href="index.html">4</a></li> ・・・・・ でなきゃならない。 　また、 style="list-style-type: none" も class="sub" なんて要りません。 　#menue ul,#menue ul li{list-style-type:none;} とか 　#menue ul li ul l1{} とかで済むはずです。 　先の回答は、そのようなHTMLの書き方やセレクタの書き方もわかるように書いたはずです。 ★HTMLは文書構造しか書かない。 ★スタイルシートは文書構造を元にデザインを指定したい要素をセレクタで指定して書きます。 「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )」は伊達じゃない。 #(一意セレクタは極力使わない--javascriptやリンクのターゲット以外には書かない。詳細度が高すぎてスタイルシートが煩雑になります。もちろんHTMLも header,footerとうclass名、HTML5では新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )でわかるようにひとつの文書に何度も登場するものです。 <div class="section"> 　<h2>見出し</h2> 　<div class="section"> 　　<h3>見出し</h3> 　　<div class="article"> 　　　<div class="header"> 　　　　<h2>・・・</h2> 　　　</div> 　　　<div class="section"> 　　　　<h3>。。</h3> 　　　</div> 　　　<div class="footer"> 　　　・・・・ 　　　</div> 　　</div> 　　<div class="footer"> 　　・・・ 　　</div> 　</div> 　<div class="footer"> 　</div> </div> とか、・・・HTML5では、 <section> 　<h2>見出し</h2> 　<section 　　<h3>見出し</h3> 　　<article> 　　　<header> 　　　　<h2>・・・</h2> 　　　</header> 　　　<section> 　　　　<h3>。。</h3> 　　　</section> 　　　<footer> 　　　・・・・ 　　　</footer> 　　</article> 　　<footer> 　　・・・ 　　</footer> 　<section> 　<footer> 　</footer> </section> と書くことになります。 この場合、idやclass名がなくても、それぞれのfooterは、セレクタで特定できるのです。 とにかく、先の回答をHTMLを含めて理解してください。そしたら簡単に解決します。

回答No.1

JQueryで良ければこんな解決策もあります。 jQuery Auto Height - 複数のカラムの高さを最大値にそろえるjQueryプラグイン http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する