Materialise CSS 粘性页脚弹性属性不起作用

Question

当我应用为 Materialize here 的粘性页脚显示的 css 属性时，我的主要元素的高度猛增至约 33000 像素。页脚显示正常，但上面是空白的（大概长度约为 33000 像素）。元素排列正确，先是页眉，然后是主要元素，然后是页脚元素。

html:

<body>
    <header>
      Header stuff
    </header>
    <main>
      Main stuff
    </main>
    <footer>
      Footer stuff
    </footer>
</body>

sass:

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

main
  flex: 1 1 auto

Answer 1

我能够通过将父 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>

sass:

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

main
  flex: 1 1 auto

Answer 2

我遇到了同样的问题，其他发布的解决方案对我不起作用，但是这个确实有效。

我正在使用 Meteor (1.1.10)，fourseven:scss (3.4.1)，poetic:materialize-scss (1.97.3_2)，kadira:flow-路由器 (2.10.0)，kadira:blaze-布局 (2.3.0)

materialize.scss

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex: 1;
}

master-layout.html

<template name="masterLayout">
<div class="site">
    <header>
      {{> Template.dynamic template=navigation}}
    </header>
    <main class="site-content">
      {{> Template.dynamic template=main}}
    </main>
    <footer class="page-footer">
      {{> Template.dynamic template=footer}}
    </footer>
  </div>
</template>

routes.js

FlowRouter.route('/', {
  name: 'home',
  action: function(params, queryParams) {
    BlazeLayout.render('masterLayout', {
      toolbar: 'toolbar',
      main: 'blog',
      navigation: 'navigation',
      footer: 'footer'
    });
  }
});

Answer 3

如果您查看示例页面的源代码，您可以了解他们是如何做到的： http://materializecss.com/footer.html

下面的结构很适合我：

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

Materialise CSS 粘性页脚弹性属性不起作用

Materialize CSS sticky footer flex properties not working

css

flexbox

sticky-footer

materialize