IE8, IE9 にて min-heightを設定した要素の子要素を高さ100%にした際の挙動

min-heightを設定した要素の子要素の高さを100%にしした際に気づきました。

Chrome, Safari, Firefox, IE10, IE11 と IE8, IE9 で挙動が変わってきます。

DEMO

Chrome, Safari, Firefox, IE10, IE11 の場合

bodyの高さが1200px以下の場合も#wrapperの高さは1200px確保されます。想定通りの挙動です。

IE8, IE9 の場合

bodyの高さが1200px以下の場合、#wrapperの高さがbodyの高さになります。困りました。

解決法

今回は時間がなかったため、windowのリサイズと同時に#wrapperの高さをJavaScriptで変更して解決しました。頑張ればCSSだけで解決できそうな気もします。

JavaScript

$(function() {

    "use strict";
    
    var $win = $(window),
        $wrapper = $("#wrapper"),
        minHeight = 1200;
    
    $win.on("resize", function() {
        $win.height($win.height > minHeight ? $win.height : minHeight);
    }).trigger("resize");

});

DEMO