Html CSS和Flexbox：获取要粘贴的页脚

工具：CSS和Flexbox

注意：这个问题严格来说是CSS/Flexbox美学问题

问题：我的页脚这些天不会保持固定。当你垂直调整大小时，它会收缩并从页面上滑下

我曾经有一个漂亮的窗口，当你垂直缩小窗口时，页眉和页脚保持在它们的位置上，而中间的内容让位了

生活是美好的-直到我将CSS翻译成React的JSX风格，这迫使我在页脚上加了一个div。

以前，生活很美好：

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="canvas">   /*my pretty flex rows*/
     <div class="footer">

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="extra-container"> /*dang you React*/
        <div class="canvas">   
        <div class="footer">

/*伸缩方向：列
/*我漂亮的弹性行*/

翻译毁了我的一周后：

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="canvas">   /*my pretty flex rows*/
     <div class="footer">

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="extra-container"> /*dang you React*/
        <div class="canvas">   
        <div class="footer">

/*伸缩方向：列
/*你有什么反应*/

你可以在这里查看这个拼图

前端大师的脑筋急转弯：

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="canvas">   /*my pretty flex rows*/
     <div class="footer">

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="extra-container"> /*dang you React*/
        <div class="canvas">   
        <div class="footer">

考虑到保留“额外容器”是必须的，如何在垂直调整页面大小时防止页脚收缩和滑出页面

考虑到保留那个“多余的容器”是必须的，你怎么办 在调整页面大小时，防止页脚收缩和滑出页面 页面是垂直的吗

一个选择是绝对定位

HTML

没有变化

CSS

向现有声明块添加四条规则

#footer {
    height: 50px;
    border: 1px solid black;
    background-color: black;
    position: absolute; /* NEW */
    bottom: 0;  /* NEW */
    z-index: 1;  /* NEW */
    width: 100%;  /* NEW */
}

演示：