- ベストアンサー
サブメニュー要素を下部する方法
以下のサンプルソースを作成しました。 希望する事は、メインコンテンツ #main 領域の最下部に、#submenu 要素をを固定したいと思います。 今までは、メインコンテンツ #main 領域の最下部に配置する為、#mainにて、height を設定して下に押し下げていましたが、コンテンツ毎に、height の高さが変わる為に、対処しきれなくなりました。 また、メインコンテンツ領域より、サイドコンテンツ領域の容量が多くなる場合、#submenu が上に行ってしまう事が有ります。 希望として、メインコンテンツ領域、サイドコンテンツ領域の容量にかかわらず、常にメインコンンテンツ領域の最下部に固定したいと思っています。サンプルソースでは、#submenu 要素を margin でマイナスを与え上に上げいます。 希望としてクロスブラウザ、汎用性の高い方法が有ればと思います。Windows IE6,IE7,FireFox2.x,3.x、Mac safari,FireFox2.x,3.x 等です。 以下にサンプルソースを記載します。 下記のサンプルソースだと、Firefox2.x,3.x で下にはみ出てしまします。 もう少しスマート（エレガント）な CSS でクロスブラウザの環境で実現する事は出来ないでしょうか。 <!-- サンプルソース --> <head> <style type="text/css"> <!-- #wrapper { margin: 0 auto; width: 510px; background-color: #FFA; border: solid 1px #F00; } #content { background-color: #FFF; border: solid 1px #F00; } #side { float: left; width: 200px; background-color: #FFE; border: solid 1px #F00; } #main { float: right; margin: 0px 0px 20px 0px; width: 300px; background-color: #FFC; border: solid 1px #F00; } #submenu { clear: both; text-align: left; width: 300px; margin: -20px 0px 0px 210px; padding: 0px 0px 0px 0px; background-color: #FFA; border: solid 1px #F00; } #submenu ul { margin: 0; padding: 0; } #submenu li { margin: 0; padding: 0; display: inline; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } --> </style> </head> <html> <body> <div id="wrapper"> <div id="content" class="clearfix"> <div id="side"> <p>サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域サイドコンテンツ領域</p> </div> <div id="main"> <div id="maincontents"> <p>メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域メインコンテンツ領域</p> </div> </div> </div> <div id="submenu"> <ul> <li>サブメニュー：</li> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> </body> </html> <!-- サンプルソース --> サンプルソースで、 border: solid 1px #F00; は、単にブロック要素が判るようにしているだけです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
追加・修正した箇所のみ記述します。 positionは古いブラウザでは挙動が保障できませんが、 ご指定のブラウザであれば問題なさそうです。 （すみません、Macは電源入れるの面倒なため確認してません…） #submenu { position:relative; margin: 0 0px 0px 210px; } #submenu ul { position:absolute; top:-20px; left:0px; } #submenuの位置を基点として、 ulのポジションを相対的に移動しています。
その他の回答 (1)
- readordie
- ベストアンサー率57% (66/115)
素直に #submenu のwidthは #wrapper と同じ（100%とかでもいいですが）にして #submeu のbackground image を #side が下いっぱいっまできているように見えるものにしてはどうでしょう。 #submeu 内のリストメニューは css で右に寄せれますし。
お礼
readordie 様 判りづらいタイトルに、ご回答頂きありがとうございます。 kuzumiHK 様からアドバイスを、position で希望通りになりました。 アドバイスを頂き、ありがとうございました。
お礼
kuzumiHK 様 判りづらいタイトルに、ご回答頂きありがとうございます。 アドバイスを試した所、希望通りになりました。 ちなみに、Mac OS X の環境で確認しましたが、問題ありませんでした。 実は、position の使い方を良く理解出来ていませんでした。 position を利用する際に、何処が起点になるのか良く理解出来ておらず、今まで殆ど利用したことがありませんでしたが、今回のアドバイスで今後積極的に、position が利用出来ると思います。 勉強になりました。ありがとうございます。