实现CSS粘性页脚flex属性不起作用

neu*_*mic 4 css sticky-footer materialize flexbox

当我在这里为Materialise应用粘滞页脚显示的css属性时,我的主要元素的高度最高可达33000px.页脚显示正常,但高于空白(可能是长度约33000像素).元素使用标题正确排列,然后是主元素,然后是页脚元素.

HTML:

<body>
    <header>
      Header stuff
    </header>
    <main>
      Main stuff
    </main>
    <footer>
      Footer stuff
    </footer>
</body>
Run Code Online (Sandbox Code Playgroud)

青菜:

body
  display: flex
  min-height: 100vh
  flex-direction: column

main
  flex: 1 1 auto
Run Code Online (Sandbox Code Playgroud)

neu*_*mic 18

我能够通过将父flex css应用于包装div而不是body元素来解决这个问题,如下所示:

HTML:

<body>
  <div class="page-flexbox-wrapper">
    <header>
      Header stuff
    </header>
    <main>
      Main stuff
    </main>
    <footer>
      Footer stuff
    </footer>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

青菜:

.page-flexbox-wrapper
  display: flex
  min-height: 100vh
  flex-direction: column

main
  flex: 1 1 auto
Run Code Online (Sandbox Code Playgroud)