我正在尝试使用基于flexBox的布局来为我的页面获取粘性页脚。这适用于Chrome和Firefox，但在IE11中，页脚位于我的主要内容之后。换句话说，主要内容没有拉伸以填充所有可用空间。
这里的例子 – 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;
}
在IE中 – 当以vh为单位测量容器高度单位时，如何使主要元素在flex布局中伸展？我想看看这种行为是否是IE实现flexBox规范的方式中的一个错误的结果，但我在其他地方找不到任何提及此问题的方法。
解决方法
问题不是vh单位，而是
min-height
我找到了一个半工作的CSS解决方案：
min-height: 100vh; height: 100px;
额外的高度将使IE能够垂直填充屏幕，即使内容不够高。缺点是如果内容比视口长，IE将不再包装内容。
由于这还不够，我在JS中提出了一个解决方案：
发现
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解决方案中观察到的行为，将高度用作IE中的辅助最小高度。
一旦定义了这两个函数，就这样设置：
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,'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>
