css 将页脚与页面底部垂直对齐( Bootstrap 5)

slwdgvem 于 2023-02-10 发布在 Bootstrap

关注(0)|答案(2)|浏览(219)

我使用了一个深色背景的页脚，因为一些页面没有足够的内容来填满整个浏览器的 windows ，我在它下面得到了一个难看的白色条纹。

**在内容很少的页面上，如何让页脚移到视区底部？**但在内容多于视区的页面上，页脚应仅在向下滚动超过该内容后显示。

我试过Bootstrap 5的fixed-bottom和sticky-bottom，但是如果有更多的内容或者浏览器视口较小，它们会隐藏内容。

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body>
  
  <div class="container">
    <h1>Title</h1>
    <p>Content</p>
  </div>
  
  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
    </div>
  </footer>
  
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>
</html>

css

来源：https://stackoverflow.com/questions/75360163/vertical-align-a-footer-to-the-bottom-of-the-page-bootstrap-5

2条答案

按热度按时间

wljmcqd81#

最简单的方法是使用Flexbox布局。您可以将适当的类（d-flex flex-column vh-100）放在主体上，然后使用mt-auto强制页脚位于底部。最后，将overflow-auto放在容器上，以便页面的其余部分可以根据需要滚动。

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body class="d-flex flex-column vh-100">
 <div class="container overflow-auto">
  <h1>Title</h1>
  <p>Content</p>
 <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
  <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
  <p>Content</p>
  <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
  <p>Content</p>
  </div>
  <footer class="bg-black text-white mt-auto">
  <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
  </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>

</html>

<body class="d-flex flex-column vh-100">
 <div class="container overflow-auto">
      <h1>Title</h1>
      <p>Content</p>
  </div>
  <footer class="bg-black text-white mt-auto">
      <div class="container">
          <p>This should be at the bottom of the page</p>
          <p>This should be no white band below this</p>
      </div>
  </footer>
</body>

- 编辑：**

如果您只希望页脚在滚动大型内容后可见，只需将vh-100更改为min-vh-100
https://codeply.com/p/273L716IHN

赞(0）回复(0）举报 2023-02-10

v2g6jxz62#

使用min-height。
请参见下面的片段。

body {
  min-height: 100vh;
}

.content {
  min-height: calc(100vh - 64px); /* 64px is the height of your footer */
}

footer p:last-child {
  margin-bottom: 0;
}

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>

<body>

  <div class="container content">
    <h1>Title</h1>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>

  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>

</html>

编辑

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-02-10

我来回答

css 将页脚与页面底部垂直对齐( Bootstrap 5)

2条答案

相关问题

热门标签

最新问答