CSSレイヤーを使うとページ下部に余白ができてしまう

質問

CSSに詳しい方に質問です。

ブロック要素をいくつか、たとえば３つ作って、absoluteもしくはrelativeにてピクセル単位で縦横の配置を行うとします。ところどころ重なったりしてます。

それをやると、ブラウザがページ全体のheightを「配置する前の状態」、つまり、３つのブロックにid指定せずに縦にただ並んだ状態のときの３つ分のheightであると解釈してしまいます。height:100pxのブロックが３つあったら全体のheightが300pxになりますよね。しかし、配置を行うので見た目のheightは250pxであったりするわけです。残り50pxぶんの空白ができてしまいスクロールしてしまうようになってしまいます。

これはどのように回避するのでしょうか。ブロック3つぶんを<div>～</div>でラップしてそのheightに250pxしてみましたがダメでした。またbodyにheight:250pxとやってみましたがこれも効きませんでした。尚、これのページは全体のheightが固定パターンのやつです。つまり「なり」で文章量に応じてheightが変わるページでなく、widthとheightが「キメ」のやつです。

XP IE 6.0x
XP Opera 8.5
Mac Safari 2.x

にて動作検証行っています。

この説明でわかりますでしょうか。もしわかりにくければ、どこかにサンプルページをアップしますのでどうぞよろしくお願いします。

回答No.1

steel_gray · ベストアンサー

・relativeの場合は通常の位置が計算され、その後相対的にずらします。また後続のブロックに関しては通常通り配置されたものとみなされて位置が決まる事になっているのでずらす前の状態が余白のように確保されます。
・absoluteの場合は通常通りの配置とは無縁になるので通常通り配置された場合の余白などはとられません。
詳しくは参考URL。

relativeとabsoluteをどのように混在させているのかわかりませんが、以上のようにabsoluteとrelativeでは動作が違いますのでその辺りを意識して使い分ければ問題ないと思います。
（とにかく余白が困るのであればabsoluteだけ使っていれば余白はとられません。）

参考URL：

http://www.y-adagio.com/public/standards/tr_css2/visuren.html#choose-position

お礼

回答ありがとうございます！おっしゃる通りでした。100%解決しました。勉強になりました。ほんとに助かりました。