min-heightを使ってみる

各ページにケイタイ用のQRコードを埋め込みたいので、写真を縮小してその下にQRコードを並べてみましたが、嫁はんから「写真は大きいほうがインパクトあるからいい」と言われて取りやめることにしました。次の候補地は、divで作ってる枠の横に回り込みで表示。ただしこのdivは中に入ってくるXMLによって高さが変わるのでデザインしにくいなーと思っていました。

調べてみるとCSSでmin-heightを設定しておけば少なくともQRコードが無駄なスペースをとってる感じにはならずに済みそうです。

#minHeightTest ul li {
	min-height: 150px;
	height: auto !important;
	height: 150px;
}

IE6でも上記のようにしておけばmin-height対象となるようです。先人の知恵に感謝。