网页中的底部foot一般是如何定位的?

网页底部一般有个foot对吧,放置一些友情链接版权声明什么的,这个模块是如何定位的?直接被上面的内容挤在最后还是用其他的方式?如果是挤在最后的话,那foot上面(假如是内容区域)的高度不够,foot下面岂不是会有白块剩余?
关注者
75
被浏览
5587

7 个回答

关键词:sticky footer

原理:通过::after伪元素撑起footer的高度,然后margin-bottom一个负值吃掉这个::after元素的高度。

参考链接:css-tricks.com/snippets
非flex莫属,最方便的方式,无多余结构

<body>
  <header>…</header>
  <main class="content">…</main>
  <footer>…</footer>
</body>
The CSS

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

.content {
  flex: 1;
}