问题描述
我想使用基于flexbox的布局来获取我的页面的粘性页脚。这在Chrome和Firefox中工作得很好，但在IE11中，页脚位于我的主要内容之后。
这里的例子 -
HTML：
< body>
< header role =banner>< h1> ..< / h1>< / header>
< main role =main>
< p> .....< / p>
< / main>
< footer> ...< / footer>
< / body>
CSS ：
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;
}
头，页脚{
background：＃dd55dd;
}
main {
background：＃87ccfc;
-ms-flex：1 0 auto;
-webkit-flex：1 0 auto;
flex：1 0 auto;
}
在IE中 - 我如何获得主要元素在弹性布局当容器高度单位是以vh？我想看看这种行为是否是IE实现flexbox规范的错误的结果，但我在其他地方找不到任何提到这个问题。
问题不是 vh 单位，而
我发现一个半工作的纯CSS解决方案：
min-height：100vh;
height：100px;
额外的 height 即使内容不够高，屏幕也会垂直移动。缺点是如果IE比视口长，IE将不再包装内容。
因为这还不够在JS中创建了一个解决方案：
检测
此函数测试错误： true 意味着它有bug。
function hasBug（）{
// inner应该填充外
//如果inner的height为0，浏览器有bug
//设置
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
中的元素的 height function fixElementHeight（el）{
//重置任何先前设置的高度
el.style.height ='auto' ;
//获取el height（通过vh中的min-height设置的值）
var height = el.offsetHeight;
//手动设置像素
el.style.height = height +'px';
}
元素的高度将设置为其内容的高度。 height 用作IE中的辅助 min-height ，使用在仅限CSS解决方案中观察到的行为。 / p>
用法
定义这两个函数后，按以下方式设置：
if（hasBug（））{
//修复元素现在
fixElementHeight（el）;
//更新resize的高度
window.addEventListener（'resize'，function（）{
fixElementHeight（el）;
}）;
}
演示
.half-screen {display：-ms-flexbox;显示：flex; min-height：50vh; padding：10px; background：＃97cef0;}。content {padding：10px; background：＃b5daf0;} 外框垂直，即使浏览器是有问题的。< div class =half-screenid =flex> < div class =contentid =output>文本< / div>< / div>
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 streched to fill all of the availible space.
Example here - http://jsfiddle.net/ritchieallen/3tpuryso/
HTML:
<body>
<header role="banner"><h1> .. </h1></header>
<main role="main">
<p>.....</p>
</main>
<footer>...</footer>
</body>
CSS:
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;
}
In IE - How can I get the main element to stretch in a flex layout when the containers height units are measured in vh? 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.
The issue isn't vh units but min-height
I found a semi-working CSS-only solution:
min-height: 100vh; height: 100px;
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.
Since this is not enough I made a solution in JS:
Detection
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;
}
Fix
The fix consists of manually setting the height of the element in 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';
}
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.
Usage
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);
});
}
Demo
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高度单位不兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！