IE11中不兼容Flexbox和vh高度单位吗? [英] Are Flexbox and vh height units not compatible in IE11?
问题描述
我正在尝试使用基于Flexbox的布局来为页面添加粘性页脚.这在Chrome和Firefox中效果很好，但在IE11中，页脚位于我的主要内容之后.换句话说，主要内容不会被拉伸以填充所有可用空间.
I'm trying to use a flexbox-based layout to get a sticky footer for my page. This works well in Chrome and Firefox, but in IE11 the footer sits just after my main content. In other words, the main content isn't stretched to fill all of the available space.
body {
border: red 1px solid;
min-height: 100vh;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
header, footer {
background: #dd55dd;
}
main {
background: #87ccfc;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
flex: 1 0 auto;
}
<body>
<header role="banner"><h1> .. </h1></header>
<main role="main">
<p>.....</p>
</main>
<footer>...</footer>
</body>
当在IE中的vh中测量容器高度单位时，如何使主要元素在弹性布局中拉伸?我一直在寻找这种行为是否是IE实施flexbox规范的方式中的错误所致，但我在其他地方找不到任何提及此问题的地方.
How can I get the main element to stretch in a flex layout when the containers height units are measured in vh in IE? I was looking to see if this behaviour is the result of a bug in the way IE implements the flexbox specs, but I couldn't find any mention of this problem elsewhere.
推荐答案
问题不是vh单位，而是 min-height
The issue isn't vh units but min-height
我找到了一个半工作的纯CSS解决方案:
I found a semi-working CSS-only solution:
min-height: 100vh;
height: 100px;
额外的height将使IE即使内容不够高也可以垂直填充屏幕.缺点是，如果IE浏览器的内容长于视口，则IE将不再包装内容.
The extra height will enable IE to fill the screen vertically even if the content is not tall enough. The drawback is that IE will no longer wrap the content if it's longer than the viewport.
由于这还不够，所以我在JS中提出了一个解决方案:
Since this is not enough I made a solution in JS:
此功能测试错误:true表示有错误.
This function tests the bug: true means it's buggy.
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;
}
修复
此修复程序包括在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解决方案中观察到的行为，height用作IE中的辅助min-height.
The element's height will be set to exactly the height of its content. height is used as a secondary min-height in IE, using the behavior observed in the CSS-only solution.
一旦定义了这两个函数，就可以通过以下方式进行设置:
Once those two functions are defined, set it up this way:
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>
这篇关于IE11中不兼容Flexbox和vh高度单位吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
