页脚未在flexbox

Question

我正在使用flexbox响应地布置一堆图像。

.cards
  .card.card1
  .card.card2
  .card.card3
  .card.card4
   etc....
footer

的CSS：

 .cards{
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   height: 81.2rem;
}

 .card{
   display: flex;
   flex-wrap: wrap;
   height: 100%;
   max-height: 28rem;
   position: relative;
 }

我遇到的问题是......

我的页脚需要低于.cards div，但由于.cards有一个高度，页脚将悬停在我告诉高度的div上。 （卡片本身超出了高度。）

我尝试过设置更高的高度，然后卡片行之间的空间扩大（我不想要）。我也尝试过不设置高度，但卡片根本没有布局，它们只是消失或漂浮在页面上。

有没有办法可以清除.cards div？

或者只是一般情况下，让页脚出现在卡片下方？

这显示了当前所在的页脚，这是不正确的。

这显示了我需要它的页脚：

Answer 1

而不是height: 100%，将容器限制在固定的高度，而是使用min-height: 100%或完全删除高度。

如果您的height属性为installed properly，则可能需要将min-height应用于父级或祖先级元素。

更多详情：Working with the CSS height property and percentage values

OP的其他说明：

  

将高度添加到弹性框的直接子节点，这允许容器确定其高度。

     

另一方面，如果你把高度放在子子（而不是直接后代）上，容器flex-box将不知道如何设置它自己的大小并且没有高度。