设置 Flexbox 最小高度以填充滚动容器中的剩余屏幕

Question

我对 Flex-box 比较熟悉，但是这个问题让我很困惑：

我正在尝试创建一个 flex-box 布局：

1. 如果内容短于屏幕（视口），则在屏幕底部放置一个页脚
2. 如果内容长于屏幕（视口），则将页脚放在滚动内容的末尾

我似乎可以得到一个或另一个，但不是这两个都可以工作。几个目标：

• 如果可能，仅在 CSS 中实现这一点
• 标题应固定在屏幕顶部，而内容具有可滚动溢出
• 标题栏的大小会有所不同，因此解决方案应该适应这一点

问题的代码沙盒演示

谢谢你的帮助

Answer 1

集min-height到100vh的#wrapper像

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

山和阿尔卑斯山，你需要设置margin的body，以0以避免滚动

body{
 margin: 0;
}

对于根据 OP 要求的粘性标题，请添加这些样式以及我提到的上述样式（我只是删除高度，因为您说标题是动态高度）

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}

所以你需要放入的最终样式demo.css如下

body {
  background-color: #444;
  margin: 0;}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}