- ベストアンサー
左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- font_color
- お礼率100% (17/17)
- HTML
- 回答数4
- ありがとう数17
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ANo.2です。 いじってみたら一応それらしいものができたのでご報告・・・ <html> <head> <style type="text/css"> *{padding:0;margin:0} body{text-align:center;} .head{width:800px;background:#f8ffff;border:1px solid #000;} .main{width:800px;overflow:hidden;} .left{width:20%;float:left;background:#f8f8ff;border:1px solid red;padding-bottom: 32768px; margin-bottom: -32768px;} .right{width:75%;float:right;background:#aaaaaa;padding:5px;padding-bottom: 32768px; margin-bottom: -32768px;} .center{width:200px;background:#00ffff;padding-bottom: 32768px; margin-bottom: -32768px;} .foot{width:100%;background:#444666;color:#fff;} .footer{clear:both;width:800px;position:relative;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる</div> </div> <div class="footer"> <div class="foot"> foot </div> </div> </div> </body> </html> これで希望通りの動きになると思います。
その他の回答 (3)
floatを指定している親要素に対して背景画像を指定することで見かけ高さが揃っているように見せるテクニックが一般的だと思います。 この場合は#mainですね。
お礼
ありがとうございます。 親要素に背景画像を入れるという方法は思いつきませんでした。 恥ずかしながらdiv要素の指定にこだわっていて、基本的なことを忘れていたようです。ありがとうございました。
- hetare560
- ベストアンサー率66% (28/42)
こんにちは。 こちらの方法でできませんか。 http://coliss.com/articles/build-websites/operation/css/558.html
お礼
ありがとうございます！ なるほど。 「padding-bottom」と「margin-bottom」を使うとは・・・こんな方法もあるんですね。 しかし、下にfooterを追加すると上手くいかないみたいです。 IEだと上手くいくんですが、Firefoxだとすごいことになってしまいました。
- affilie
- ベストアンサー率36% (173/474)
こんにちわ。 もしかしたら…"valagin"水平位置が抜けているだけでしょうか。 違ってましたら御容赦ください。
お礼
回答ありがとうございます。 教えていただいた"valagin"というのは"vertical-align"のことでしょうか？ "valagin"というタグは検索しても見つからなかったので・・。 ちなみにvertical-alignでは、div（ブロックレベル要素）には適応できませんでした。
お礼
ありがとうございます。 なるほど。footerはpositionを指定することで対処できるんですね。 とても勉強になりました。これで上手く出来そうです。 ご丁寧にソースでの分かりやすい説明、ありがとうございました！ ちなみにですが・・自分なりに解決策を探しているうちにdisplay:table-cell;という方法にたどり着きました。 こんなにいろいろ手段があるなんて、悩んでいた自分が情けない・・CSSって奥が深いですね。