Rit*_*len 28 html css flexbox internet-explorer-11 viewport-units
我正在尝试使用基于flexbox的布局来为我的页面获取粘性页脚.这适用于Chrome和Firefox,但在IE11中,页脚位于我的主要内容之后.换句话说,主要内容没有拉伸以填充所有可用空间.
这里的例子 - http://jsfiddle.net/ritchieallen/3tpuryso/
HTML:
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;
}CSS:
<body>
<header role="banner"><h1> .. </h1></header>
<main role="main">
<p>.....</p>
</main>
<footer>...</footer>
</body>在IE中 - 当容器高度单位以vh为单位测量时,如何在flex布局中获取主元素？我想看看这个行为是否是IE实现flexbox规范的方式中的错误的结果,但我在其他地方找不到任何提及此问题的方法.
fre*_*nte 26
问题不是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';
}
元素的高度将精确设置为其内容的高度.在IE中height用作辅助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>我昨天也遇到了同样的错误，也无法自己解决。不幸的是，目前似乎对此无能为力，因为这是 IE 错误，大约一年前已向微软开发人员报告了该错误，如下：
| 归档时间： |
|
| 查看次数： |
24944 次 |
| 最近记录： |