Css flexbox粘性页脚_Css_Flexbox_Height_Sticky Footer

Css flexbox粘性页脚

css

Css flexbox粘性页脚,css,flexbox,height,sticky-footer,Css,Flexbox,Height,Sticky Footer,我正试图实现这个问题中描述的或多或少相同的目标：除了我不能使用固定高度我有一套两张卡片，已经在flex环境中，它们的高度通过flexbox拉伸：在卡片内部，我有一系列元素：标题身体蓝色div的页脚我想要的是页脚总是粘在底部上述三个元素的内部容器具有以下CSS： .card-inner { display:flex; flex-flow :row wrap; align-items: stretch; } 里面的东西都有 .card { &-header,

我正试图实现这个问题中描述的或多或少相同的目标：

除了我不能使用固定高度

我有一套两张卡片，已经在flex环境中，它们的高度通过flexbox拉伸：

在卡片内部，我有一系列元素：

标题身体蓝色div的页脚我想要的是页脚总是粘在底部

上述三个元素的内部容器具有以下CSS：

.card-inner {
  display:flex;
  flex-flow :row wrap;
  align-items: stretch;
}

里面的东西都有

.card {
  &-header,
  &-body {
    flex: 0 1 100%;
  }
  &-footer {
    flex: 0 1 100%;
    align-self:flex-end;
    margin-top: auto;
  }
}

我本以为align-self:flex-end或margin-top:auto会将footer-div向下推到卡片上，但这并没有发生

也许这两个flex上下文彼此不说话，也不相关？或者，如果没有到内部容器的高度，flex上下文将在内容流结束时结束

是否有一种方法可以通过使用flexbox实现无高度

下面是一个代码笔示例：

添加显示：flex到.card

这将允许孩子们使用.container的整个高度

它还会将页脚固定在底部

如果需要更全面的修复，您需要将.container-inner的弹性方向切换到column，并对弹性项进行调整以考虑此切换

对齐self:flex end和margin top:auto不起作用的原因与多行flex容器中的flex行有关

本质上，由于对齐内容的工作方式，页脚无法脱离其伸缩线并移动到容器底部

有关完整的解释，请参阅本帖：

将显示：flex添加到.card