我的页面有一个动态页脚,我希望它上面的内容能够自适应缩放以达到页脚的顶部,这没问题,但是我遇到了一个问题:
#snippet-container {
height: 300px;
width: 200px;
}
#page {
display: flex;
flex-flow: column;
height: 100%;
}
#content {
flex: 1 1 auto;
background: blue;
}
#content .test {
width: 100%;
height: 100%;
background: yellow;
border: 2px solid red;
}
#footer {
flex: 0 1 10vh;
background: black;
}
<div id="snippet-container">
<div id="page">
<div id="content">
<div class="test"></div>
</div>
<div id="footer"></div>
</div>
</div>
.test
元素填充#content
元素,因此使用了100%/100%的宽度/高度
,但实际未能实现。在代码片段中,您可以看到这一点反映在我为
.test
元素设置的红色边框上。
flex-fow
替换为flex-direction
。那可能是问题所在,虽然我不确定。 - agdhruv