佐賀あたりで働くWebデザイナーのブログ/FLA-FLI

もともとそのサイトはブログを一部使っているために、クライアントが大きな画像とかを入れてた場合に備えて、記事が入るブロックに「overflow: hidden;」をかけていたわけです。

ここまでは何の問題もなくて、しっかり意図した動きをしていたわけです。

で、仮組みだからブログの記事が入っているものの、空っぽにした時はヘッダーとフッターの距離が縮まってしまうわけです。

そこで、僕は「min-heigh」を入れたわけです。

この「min-height」が原因でした。

.hoge {
  height: 100px;
  overflow: hidden;
}
.hogehoge > hoge {
  min-height: 100px;
}

って書いてたわけですが、今思うとおかしい。

最低幅を指定していて、それ以上は不可視。
つまり、最低幅を指定するボックスには「overflow」やっちゃダメ。ってこと。
まぁ、「overflow-x」とかにする方法もなくはないんですけどね。

対処法は簡単で、別のボックス要素（今回はメニューのボックス）に最低の高さを与えてあげれば解決。

ものの5分ほどで終了。
いやぁ、確認を怠ってしまいました…。

上のCSSコードでの「>」を使う方法。
「子セレクタ」といいますが、その辺は『子セレクタ「>」を利用したハック：CSS HappyLife』さんのがわかりやすいかと。
一応ハックとなってますが、どうなんだろう？

タグ:

フッターナビゲーション

• パーマリンク
• コメント (0)
• トラックバック (0)