如何在不使用固定 [重复] 的情况下将页脚粘贴到页面底部

Question

所以我正在开发一个我想要响应的网站，但我不知道如何使页脚粘在页面底部。我知道，有固定的属性，但是在手机上它隐藏了我一半的文字。我找到了一个解决方案，但我不知道如何使用它（https://getbootstrap.com/docs/4.0/examples/sticky-footer/）。我正在使用 Bootstrap 5.0。我搜索了图书馆，找不到属性页脚或类似的东西。我的目标是让页脚尽可能靠近我链接的页面。

CSS 和 HTML

html {
  background-color: #eeeeee;
}

.bgr {
  background-color: #eeeeee;
}

.splitup {
  margin: 0px 0px 50px 0px;
  color: black;
  border-color: black;
  border-top: 5px solid;
}

.splitdown {
  margin: 50px 0px 0px 0px;
  color: black;
  border-color: black;
  border-top: 5px solid;
}

.top {
  padding: 20px 10px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  background: #0063be;
  color: white;
  text-decoration: none;
}

.space {
  margin-bottom: 50px;
}

.bot {
  padding: 20px 10px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  background: #0063be;
  color: white;
  text-decoration: none;
}

.link-light {
  text-decoration: none;
}

#logo {
  margin: 0px 0px 0px 0px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="bgr">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4 top">
        <a href=""><img src="" class="img-fluid" id="logo" height="30%" width="30%"></a>
      </div>
      <div class="col-sm-4 top">
        <h4>
          <a href="" class="link-light">Lorem ipsum</a><br>
          <a href="" class="link-light">Lorem ipsum</a>
        </h4>
      </div>
      <div class="col-sm-4 top">
        Lorem ipsum dolor sit amet
      </div>
      <div class="splitup"></div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-5 border border-dark">
        <p class="fw-bold">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Pellentesque sapien. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
        Aliquam erat volutpat. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Suspendisse nisl. Vestibulum fermentum tortor id mi. Donec quis nibh at felis congue commodo. Nunc tincidunt ante
        vitae massa. Etiam dictum tincidunt diam.<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
        <a href="" class="link-dark">Lorem ipsum dolor sit amet</a><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
      </div>
      <div class="col-sm-1 space"></div>
      <div class="col-sm-4 border border-dark">
        <p class="fw-bold">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Pellentesque sapien. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
        Aliquam erat volutpat. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Suspendisse nisl. Vestibulum fermentum tortor id mi. Donec quis nibh at felis congue commodo. Nunc tincidunt ante
        vitae massa. Etiam dictum tincidunt diam.<br>
      </div>
      <div class="col-sm-1"></div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row fixed-bottom">
    <div class="splitdown"></div>
    <div class="col-sm-2 bot">
      Lorem ipsum dolor sit amet
    </div>
    <div class="col-sm-8 bot">
    </div>
    <div class="col-sm-2 bot">
      <a href="" class="link-light">Lorem ipsum dolor sit amet</a>
    </div>
  </div>
</div>
</div>

Answer 1

首先，对于页脚，如果您使用的是引导程序，则需要使用 <footer class="footer"></footer>。

如果你使用 react，你也可以有一个单独的页脚组件。

在html、css中

Bootstrap footer at the bottom of the page

https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap#:~:text=The%20simplest%20technique%20is%20probably,the%20footer%20to%20the%20bottom.&text=Tested%20with%20Bootstrap%203.6.

以上链接应该会有所帮助

Answer 2

对于我使用的一些项目

html {
  height: 100%; 
}
body {
  min-height: 100%;
}

测试它是否适合你