Question

我已将其中一个预先制作的页脚插入我的模板中。页脚通常在一个块内。然而最令人讨厌的是，当页脚内容很少时会出现，但是内容很多，它仍然位于底部。如何让它保持在最底层？

.footer-basic {
  background:#262324;
  bottom:0;
  width:100%;
  position:fixed;
}

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

body {
  font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.42857143;
  color:#666666;
  background-color:#ffffff;
}

html {
  font-family:sans-serif;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}

html {
  font-size:10px;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

Answer 1

定位页脚元素并制作

 position:fixed;
 bottom: 0;

请务必保留此订单。这是至关重要的，因为CSS是级联的，如果先前未定义bottom: 0，则不会读取position。

然后使容器的最小高度为100vh。

Answer 2

将其添加到身体对我有用：display: grid; grid-template-rows: 1fr auto;

如何使页脚停留在底部Bootstrap Studio

2 个答案: