如果你真正想要的是一个布局，将始终填充至少100%的视口和主要内容拉伸，以填补任何空间，而页脚是在内容的底部，那么你应该使用网格如下：

已编辑，以便页脚始终停留在视口底部

* {
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
}

#app {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr max-content; 
}

header {
  padding: 1rem 2rem;
  background-color: black;
  color: white;
  margin: -1rem -2rem 2rem;
}

main {
  padding: 1rem 2rem;
  overflow-y: auto;
}

footer {
  padding: 1rem 2rem;
  background-color: black;
  color: white;
}

<div id="app">
  <main>
    <header>header will only be as big as its content and scroll away with the content.</header>
    <h1>main will stretch to fill the remaining space in the middle</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores laudantium quas reprehenderit nulla. Dignissimos autem nam cupiditate repellat, magni, esse culpa aperiam iste incidunt asperiores, assumenda modi porro blanditiis laboriosam!</p>
    <p>Similique recusandae ad ex ipsa, deserunt dolor molestias eveniet at? Nostrum aspernatur corporis incidunt adipisci id consequuntur, praesentium eveniet veniam aut illum doloribus quibusdam eos molestiae nesciunt! Soluta, autem qui.</p>
    <p>Molestiae vitae dignissimos pariatur rerum repudiandae dolores sequi libero voluptas, quidem, provident, adipisci ipsam similique itaque. Alias, suscipit laborum beatae provident accusantium sunt nulla minus cupiditate ratione, commodi adipisci praesentium.</p>
    <p>Magni, a quos facilis ad quas nobis reprehenderit magnam maiores id, necessitatibus molestiae repellat, error dolores earum ex officiis totam debitis. Omnis doloremque, suscipit aliquid distinctio itaque iusto voluptas obcaecati.</p>
    <p>Quasi eos ea illum modi eum quidem maxime aperiam accusamus aliquid nam, nobis aut, esse labore voluptates non nihil molestiae earum laborum repudiandae necessitatibus deleniti obcaecati? Asperiores, aliquid laboriosam. Libero.</p>
    <p>Provident laboriosam enim eaque quo? Aliquam, nesciunt eveniet amet beatae accusantium placeat ullam. Ipsum, nihil culpa inventore libero architecto tempore voluptas, totam pariatur similique quas expedita sint molestias vitae dicta.</p>
    <p>Eos fugiat quod obcaecati, possimus, excepturi ducimus recusandae quisquam mollitia sit doloremque nihil ipsum adipisci inventore sint quasi aperiam neque quidem quos? Dolorum, doloremque iusto et quod corporis error nihil.</p>
    <p>Incidunt, provident vel id suscipit quasi ut quae eligendi accusamus, minus iusto vitae excepturi enim, modi possimus? Dolorum molestiae quis maiores, delectus similique hic nulla quasi molestias. Eligendi, eos ipsa.</p>
    <p>Labore, facere! Eligendi rerum natus alias optio dolorum facilis maiores ad tempora? Ratione doloribus laboriosam dolor repudiandae obcaecati qui cumque ducimus eos, odit debitis nesciunt illum repellendus quisquam iusto voluptatum!</p>
    <p>Accusantium quidem aliquam, aut veniam corrupti, quas temporibus, consequatur ullam blanditiis provident fugiat quibusdam. Sint aliquam esse vero corporis amet praesentium adipisci sit, quisquam perferendis ducimus repudiandae autem dolores eius.</p>
  </main>
  <footer>footer will only be as big as its content and always stay at the bottom.</footer>
</div>

所以最后一个对我有效的解决方案是：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'lato';
}

body,html, #app {
    min-height: 100vh;
    max-width: 100vw;
}

#wrapper {
    min-height: 100vh;
    height: auto;
    max-width: 100vw;
    padding-bottom: 120px;
}
footer {
    height: 120px;
    width: 100%;
    background-color: pink;
    position: fixed;
    bottom: 0;
    display: grid;
    grid-template-rows: 1fr 2fr;

    #lien-express {
        display: flex;

        .lien-express-1 {
            @include flex-lien-express;
            background-color: $DBLUE;
        }
        .lien-express-2 {
            @include flex-lien-express;
            background-color: $MGREY;
        }
    }
}

calc不考虑自动高度，所以当我尝试用calc计算时，我不能用一个未知变量来计算，但是我可以创建一个父代，它通过填充来完成calc的工作，把元素放在里面。