Question

有没有一种方法可以在不使用position：fixed属性的情况下将页脚边框固定在屏幕底部（viewpor）？我之所以这样问，是因为在野生动物园中固定定位会带来一些麻烦，我想知道是否可以用其他方式做到这一点。

以防万一：即使页面向下滚动，我也希望页脚停留在VIEWPORT（不是页面）的底部。

谢谢。

Answer 1

我将亲自查看CSS Grid，例如：

html,
body {
  width: 100%;
  height: 100%;
}

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

<html>

  <body>
    <article>
      <header>Header goes here
      </header>
      <main>Main content goes here
      </main>
      <footer>Footer goes here
      </footer>
    </article>
  </body>

</html>

Flexbox也是一个选项，例如：

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

header {
  height: 100px;
  background-color: blue;
}

main {
  flex: 1 0 auto;
}

footer {
  height: 20px;
  background-color: blue;
}

<div class="container">
  <header>Header goes here</header>
  <main class="content">Main content goes here</main>
  <footer>Footer goes here</footer>
</div>

固定页脚，不固定位置

1 个答案: