Question

根据我下面的内容，如果我的主要内容没有足够的内容，有人可以帮助我如何让我的页脚停留在浏览器窗口的底部。我不想要一个粘性页脚。要做到这一点，必须有一种有棱角的物质方式，但我无法找到它。

谢谢！

<body layout="column" >
  <md-toolbar >
  </md-toolbar>

  <div layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2 " flex >
    </md-sidenav>

    <md-content flex layout="row" layout-align="center start">
      <div style="max-width: 1600px;" flex layout="column" layout-fill >
        <div >
          this is the main content
        </div>
        <div >
          this is the footer
        </div>
      </div>
    </md-content>
  </div>
</body>

这里是jsfiddle

Answer 1

我希望this可以帮到你。我在你的html中添加了一些类并应用了这些规则。

.wrapper,
div[layout=row]
{
    height: 100%;
}

div[layout=column]
{
      display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content
{
     flex: 1;
}

角度Materail：强制页脚到底部

1 个答案: