实现CSS - 粘滞页脚

Question

我按照这里提到的步骤 - http://materializecss.com/footer.html - 创建了一个Sticky Footer,但结果并不像预期的那样.

我将以下代码复制粘贴到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>

我应该如何使用<main>我将所有内容包含在内部的页脚中并且它不起作用,将页脚保持在main之外也不起作用// = (2认同)
我有同样的问题,使用Materialise with React.我的结构是使用页眉,主页脚组件(即使它们位于我的React"app"容器的div中).但是所有内容都包含在主要div中(即标题,主页和页脚是它的子项).然而,页脚仍然不想坚持到底部. (2认同)

Answer 2

如果查看示例页面的源代码，则可以看到它们的运行方式：http : //materializecss.com/footer.html

像下面的示例一样构造HTML：

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

Answer 3

Materialize CSS 需要结构：

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

被保存。以下是如何使用 react 来实现它：

索引.html

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

索引.js

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

应用程序.js

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

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

索引文件

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

main {
  flex: 1 0 auto;
}

Answer 4

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

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