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

最小高度与铬的百分比不兼容。使用像素。例如：最小高度：600px;

Answer 2

你尝试过使用

吗？

align-content: stretch;

而不是min-height？

请发一个工作示例/小提琴！

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

min-height适用于Firefox，但不适用于chrome

2 个答案: