問題はvh単位ではありませんが、min-height
半機能の CSS のみのソリューションを見つけました。
min-height: 100vh;
height: 100px;
エクストラheightを使用すると、コンテンツの高さが十分でない場合でも、IE が画面を垂直方向に埋めることができます。欠点は、コンテンツがビューポートよりも長い場合、IE がコンテンツをラップしなくなることです。
これでは不十分なので、JS で解決策を作成しました。
検出
この関数はバグをテストします: バグがあるtrueことを意味します。
function hasBug () {
// inner should fill outer
// if inner's height is 0, the browser has the bug
// set up
var outer = document.createElement('div');
var inner = document.createElement('div');
outer.setAttribute('style', 'display:-ms-flexbox; display:flex; min-height:100vh;');
outer.appendChild(inner);
(document.body || document.documentElement).appendChild(outer);
// test
var bug = !inner.offsetHeight;
// remove setup
outer.parentNode.removeChild(outer);
return bug;
}
修理
修正はheight、要素の を手動で設定することで構成されますpx
function fixElementHeight (el) {
// reset any previously set height
el.style.height = 'auto';
// get el height (the one set via min-height in vh)
var height = el.offsetHeight;
// manually set it in pixels
el.style.height = height + 'px';
}
要素の高さは、そのコンテンツの高さに正確に設定されます。CSS のみのソリューションで見られる動作を使用して、IE でheightセカンダリとして使用されます。min-height
使用法
これら 2 つの関数を定義したら、次のように設定します。
if(hasBug()) {
// fix the element now
fixElementHeight(el);
// update the height on resize
window.addEventListener('resize', function () {
fixElementHeight(el);
});
}
デモ
function hasBug () {
// inner should fill outer
// if inner's height is 0, the browser has the bug
// set up
var outer = document.createElement('div');
var inner = document.createElement('div');
outer.setAttribute('style', 'display:-ms-flexbox; display:flex; min-height:100vh;');
outer.appendChild(inner);
(document.body || document.documentElement).appendChild(outer);
// test
var bug = !inner.offsetHeight;
// remove setup
outer.parentNode.removeChild(outer);
return bug;
}
function fixElementHeight (el) {
// reset any previously set height
el.style.height = 'auto';
// get el height (the one set via min-height in vh)
var height = el.offsetHeight;
// manually set it in pixels
el.style.height = height + 'px';
}
var output = document.getElementById('output');
output.innerHTML = hasBug()?'Browser is buggy':'Browser works correctly';
var el = document.getElementById('flex');
if(hasBug()) {
// fix the element now
fixElementHeight(el);
// update the height on resize
window.addEventListener('resize', function () {
fixElementHeight(el);
});
}
.half-screen {
display:-ms-flexbox;
display: flex;
min-height: 50vh;
padding: 10px;
background: #97cef0;
}
.content {
padding: 10px;
background: #b5daf0;
}
The inner box should fill the outer box vertically, even if the browser is buggy.
<div class="half-screen" id="flex">
<div class="content" id="output">
Text
</div>
</div>