Question

我按照此处提到的步骤 - http://materializecss.com/footer.html - 创建了一个粘性页脚，但结果并不像预期的那样。

我将以下代码复制粘贴到materialize.min.css文件中：

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

  main {
    flex: 1 0 auto;
  }

Answer 1

您可能没有使用<main>代码

注意：我们使用flexbox来构造我们的html，以便页脚总是在页面的底部。保持这一点非常重要 3个HTML5标记中的网页结构：<header>，<main>， <footer>

Answer 2

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

构建您的HTML，如下例所示：

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

Answer 3

只需在（主要）之前添加（＃）。

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

  #main {
    flex: 1 0 auto;
  }

Answer 4

实现CSS需要结构：

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

要保存。以下是如何使用react实现它的方法：

<强>的index.html

<body id="root"></body>

<强> index.js

ReactDOM.render(<App/>, document.getElementById('root'))

<强> App.js

render() {
return (
  [
    <header>
      ...
    </header>,
    <main>
      ...
    </main>,
    <footer>
      ...
    </footer>
  ]
);

请注意，我们返回一个数组以在同一级别上呈现多个项目。

<强> index.css

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

main {
  flex: 1 0 auto;
}

Answer 5

如果您在Angular组件下使用此页脚，则<header> <main> <footer>标记可能包含<app-root>标记。在这种情况下，您应该指定您的css如下：

app-root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}

Answer 6

对于那些使用 Ember.js （v2.14）的人：你必须稍微修改一下这些说明。

如果你的app / template / application.hbs看起来像这样：

<header>
</header>

<main>
{{outlet}}
</main>

<footer>
</footer>

然后你的app / styles / app.js应如下所示：

.ember-view {
  display: flex;
  flex-direction: column;
}

main {
  min-height: 100vh;
  flex: 1 0 auto;
}

Answer 7

在css的主体和主选择器上放置背景颜色，并查看这两个元素。如果其中一个没有改变颜色，它可能是在它之前的css中的一个问题 - 即。检查它上面的样式。

Answer 8

不知道为什么，但是当我在Visual Studio中创建一个asp.net应用程序并实现了实现时，便有了粘性页脚，我意识到 main 标记由于某种原因没有占据空白！甚至我都严格按照文档进行操作。

要找出原因，我使用notepad ++构建了类似的html页面，并开始仅从Visual Studio页面复制所需的元素（没有额外的脚本和NuGet程序包，并且效果很好。主要标签只是占据了空白，而页脚则紧贴了。

然后，我在chrome中打开了两个页面（Visual Studio的一个页面，notepad ++的简单的页面），然后开始比较开发人员工具中每个元素的两个CSS。他们是一样的！但是，main仅限于Visual Studio中的内容，而在notepad ++中占据空白！！！

对我来说，解决方案是添加CSS

main {
    min-height: calc(100vh - 90px); 
}

请记住，我的页脚高度为90px。

我希望有人能找出主要原因，而不是解决未知的问题