物化 CSS - 粘性页脚答案

【问题标题】：Materialize CSS - Sticky Footer物化 CSS - 粘性页脚
【发布时间】：2015-06-24 13:28:02
【问题描述】：

我按照此处提到的步骤 - http://materializecss.com/footer.html - 创建了一个 Sticky Footer，但结果不如预期。

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

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

  main {
    flex: 1 0 auto;
  }

【问题讨论】：

但结果并不像预期的那样。您能否更具体地给我们一个演示（也许是 Fiddle）？
你为什么要将未统一的 css 复制到缩小文件中？

标签： css material-design materialize

【解决方案1】：

您可能没有使用<main> 标签

注意：我们使用 flexbox 来构建我们的 html，以便页脚是始终位于页面底部。重要的是保持 3 个 HTML5 标签内的页面结构：<header>、<main>、 <footer>

【讨论】：

感谢 Kenneth De Win 这解决了我的问题
这解决了我的问题。
我应该如何使用
我将所有内容都用页脚包裹在里面但它不起作用，将页脚保持在 main 之外也不起作用 //=
我遇到了同样的问题，将 Materialize 与 React 结合使用。我的结构使用页眉、主要、页脚组件（即使它们位于我的 React“应用程序”容器的 div 内）。但所有内容都包含在该主 div 中（即页眉、主和页脚是它的子级）。然而，页脚仍然不想粘在底部。
我的问题是我在主要组件周围有一个容器 div。把它们调换一下就行了。

【解决方案2】：

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

像下面的例子那样构建你的 HTML：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

React 也是如此（我想其他框架也是如此）。谢谢！

【解决方案4】：

Materialize 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;
}

【讨论】：

【解决方案5】：

只需在 (main) 之前添加 (#)。

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

  #main {
    flex: 1 0 auto;
  }

【讨论】：

这只有在您不使用主标签而是使用带有.main 类的 div 时才有意义，这不是他们推荐的。

【解决方案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;
}

【讨论】：

这解决了我的问题。非常感谢！

【解决方案7】：

在 CSS 中的 body 和 main 选择器上都设置一个背景色，然后查看这两个元素。如果其中一个没有改变颜色，则可能是它之前的 css 中的问题 - 即。检查上面的样式。

【讨论】：

【解决方案8】：

不知道为什么，但是当我在 Visual Studio 中创建一个 asp.net 应用程序并使用粘页脚实现物化时，我意识到 main 标记由于某种原因没有占据空白空间！即使我完全遵循了文档。

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

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

我的解决方案是添加 css

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

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

我希望有人能找出主要原因，而不是修复一个未知数

【讨论】：