見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法に

質問

見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法について

見出しや左メニューの部分のhtmlをページ全体の後ろのほうに配置したいと考えています。
添付の画像のソースが以下のとおりです
-----------------------------------------------------------------------
<div style="position:relative;margin:auto;width:800px;">
<div style="height:20px;width:100%;background-color:#ff0000;">
</div>
<div style="margin:0px 0px 0px 150px;width:650px;background-color:#00ff00;">
ああああああ<br />
ああああああ<br />
ああああああ<br />
ああああああ<br />
</div>
<div style="position:absolute;top:20px;left:0px;width:150px;background-color:#0000ff;">
いいいいい<br />
いいいいい<br />
いいいいい<br />
いいいいい<br />
いいいいい<br />
いいいいい<br />
いいいいい<br />
</div>
<div style="height:20px;width:100%;background-color:#ffff00;">
</div>
</div>
-----------------------------------------------------------------------
一応、左メニューについて実現できていて、見出しも同様にやれるのですが、
この方法では、absoluteで配置しているため、フッターの部分を重ならない
ようにするためには、見出しとフッターの間のブロックについて高さを指定する
しか方法を思いつきません。

・absoluteで配置する以外の方法があるでしょうか。
・absoluteで配置したとしても、高さを指定しない方法があるでしょうか。

よろしくお願いします。

回答No.2

taka451213 · ベストアンサー

なるほど・・・。

どうやら青が緑より高いと駄目ですね（逆はOKなんですが・・・）。
参考URLにありました。
お力になれず、申し訳ないです・・・。

参考URL：

http://desperadoes.biz/style/dan/

お礼

taka451213さん

参考urlを読んだところ、結局absoluteのサイズを親ブロックに反映させるのは無理という事のようですね。無理と判れば、あきらめるしかないので、それを前提にして作ることにします。
どうも、ありがとうございました。

回答No.1

taka451213

こんにちは

黄色のフッターを青と緑の下に置く場合は、親要素のDIVから出してしまえばいいですね。
緑と黄色の間を開けて、高さを青に揃えたいという事でしたら、黄色のpositionを親要素の右下基準で指定しては？

補足

こんにちは

>黄色のフッターを青と緑の下に置く場合は、親要素のDIVから出してしまえばいいですね。
出してみましたが、黄色のフッターの幅が広がるだけで、青と重なってしまいます。

>緑と黄色の間を開けて、高さを青に揃えたいという事でしたら、黄色のpositionを親要素の右下基準で指定しては？
bottom:0px；で指定しましたが、やはり変わりませんでした。

absolute指定のブロックの高さは親要素の高さの計算に使われないようです。absolute指定したブロックの高さを親要素の高さに含める手はないのでしょうかね。