スポンサーリンク
Android端末（optimus LTE L-01D）の標準ウェブブラウザにて、CSS の min-height が効いていないことに気が付きました。Androidでmin-heightが効かない、という話やその対策が見当たらなかったので（IE6はたくさんあった）、CSSを諦めてJavaScript（jQuery）で応急処置をしたので、紹介しておきます。
スポンサーリンク
min-heightが効かない
Android 4.0.4 にアップデート済みの docomo Optimus LTE L-01D のデフォルトのブラウザで、CSSのmin-heightが効いていませんでした。
iPhone 5s の Safariでは普通に動作しており、気が付きませんでした。
対策
原因が単純にmin-heightの問題だかはわかりませんが（他に困っているらしき人が見当たらなかったので）、どうやらCSSのmin-heightを受け付けてくれていなかったので、てっとり早く、jQueryを使って次のように書いて応急処置を行いました。
jQuery(function($){
var element = $("#selector");
if ( element.height() < 100 ) {
element.css({ height: '100px' });
}
});
「min-height: 100px;」を、jQueryを使って実現しています。要素の中身が動的だったりする場合は、上手く動かない場合があると思います。その場合は、同手木に変更するJavaScriptの直後にこのチェックを挟み込むなど、工夫してください。
また、min-widthの場合は、「height」を「width」に変更するだけです。
おまけ：IE6向けの対策と共存できない
当初、IE6のバグを使っている特殊なCSSハックだと知らずに、検索して出てきた「min-height: 100px; height: auto !important; height: 100px; 」を試してみたところダメで、その後jQueryを追加したのですが、このCSSの変更を元に戻さないと、jQuery側がうまく動いてくれませんでした。
スポンサーリンク
コメント（1）
新しいコメントを投稿
スポンサーリンク
｜HOME｜
『【CSS3】アイコン画像を使わずにCSSのみで外部リンクアイコンを設置した方法メモ』 OLD >>
2014年12月16日(火) 11:37
使えない場面もあるかもですが、CSSだけでも対策は取れますよ。
min-heightをかけている要素に対して、下記のように高さを持った幅のない擬似用を入れてやるんです。
div {
min-height: 100px;
}
div:before {
display: block;
height: 100px; /* min-heightと同じ高さ */
content: “”;
}
高さを持った要素を中に入れることで、mini-heightと同じ状態を作り出せます。
いかがでしょうか。