Question

当我为Materialise here应用粘滞页脚显示的css属性时，我的主要元素的高度最高可达33000px。页脚显示正常，但高于空白（可能是长度约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-router（2.10.0），kadira：blaze -layout（2.3.0）

materialize.scss

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

.site-content {
  flex: 1;
}

主的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>

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

3 个答案: