html - 最小高度适用于 firefox 但不适用于 chrome

Question

我有一个 flex css，它在 firefox 上一切正常，但是当我使用 chrome 时，main_content 具有整个屏幕大小，但其中的 div 只是内容的高度

.sticky-footer-wrapper{
    min-height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.main_content{
  flex:1;
}
.main_footer{
  background: 3em;
  height: 3em;
}

这是标记:

<div class="sticky-footer-wrapper">

<nav class="main_header">
</nav>

<main class="main_content" role="main"> 
    <div>content...</div>
</main>

<footer class="main_footer Footer">
</footer>

</div>

这是一个 jsfiddle:

https://jsfiddle.net/9usvm1c1/1/

所有的内容都应该是黄色的，其实不是

我做错了什么？

Answer 1

最小高度与 chrome 中的百分比不兼容。使用像素。例如:最小高度:600 像素；