我正在尝试使用基于 flexbox 的布局为我的页面获取粘性页脚。这在 Chrome 和 Firefox 中运行良好，但在 IE11 中，页脚位于我的主要内容之后。换句话说，主要内容不会被拉伸(stretch)以填满所有可用空间。
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 测量时，如何让主要元素在 flex 布局中拉伸(stretch)？我正在查看此行为是否是 IE 实现 flexbox 规范的方式中的错误的结果，但我在其他地方找不到任何提及此问题的信息。
最佳答案
问题不是 vh 单位而是 min-height
我找到了一个半工作的纯 CSS 解决方案:
min-height: 100vh;
height: 100px;
额外的 height 将使 IE 能够垂直填充屏幕，即使内容不够高。缺点是如果内容长于视口(viewport)，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;
}
修复
修复包括手动设置 px 中元素的 height
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';
}
元素的高度将被设置为其内容的高度。 height 在 IE 中用作辅助 min-height，使用在纯 CSS 解决方案中观察到的行为。
用法
一旦定义了这两个函数，就可以这样设置:
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>关于html - Flexbox 和 vh 高度单位在 IE11 中不兼容吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25177791/