中級プログラマの自宅でPHP ブログ

自宅用ポータルシステム「MyHome Portal」をオープンソースで公開。MyHome Portalの説明とエンハンス情報。

DIVの組み合わせで思い通りのレイアウトは難しい。

MyHome Portal Ver.2.60で、アルバムの上位ディレクトリを、左側に表示できるようにしましたが、ウインドウの下端一杯に広げたかったのですが、方法がわかりませんでした。CSSはやはり難しいです。HTMLとCSSを一部抜きだすと次のような感じです。ウインドウの下一杯に広げる方法がわかる方、アドバイスをお願いいたします。

ここに抜き出した部分より上の<div id="page_navi">などの高さが固定なら実現できそうなのですが、これら上段部分はウインドウサイズにより可変という前提です。下のフッター部分はなしという条件でもOKです。

<div id="photo_body">

<div id="photo_header">

</div>

<div id="photo_contents">

<div id="photo_dir">

</div>

<div id="photo_main">

</div>

</div>

</div>

#photo_body {

height: 70%;

}

#photo_contents {

position: relative;

height: 100%;

}

div#photo_dir {

position: absolute;

height: 100%;

overflow: scroll;

}

<div>部分のみにしたHTML全体とCSSを以下にも置きました。

http://ok2nd.web.fc2.com/sample/index.html

http://ok2nd.web.fc2.com/sample/photo.css

http://ok2nd.web.fc2.com/sample/photo-left.css