2023年2月6日 18:36:11go评论62阅读模式

英文:

Vertical align a footer to the bottom of the page (Bootstrap 5)

问题

我正在使用深色背景的页脚。因为某些页面没有足够的内容来填满整个浏览器视口，所以在底部出现一个难看的白色条。

如何使页脚在内容较少的页面中达到视口底部？ 但在内容多于视口的页面上，页脚应该只在滚动超过该内容后才出现。

我尝试过使用 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>

(Note: I have provided the HTML content as requested, and I have not translated the code sections.)

英文:

I am using a dark background footer. Because some pages don't have enough content to fill the entire browser's viewport, I am getting an ugly white band below it.

How do I get the footer to go to the bottom of the viewport on pages with little content? But on pages with more content than the viewport, the footer should only appear after scrolling down past that content.

I've tried fixed-bottom and sticky-bottom of Bootstrap 5, but these hide the content if there is more content or the browser viewport is smaller.

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

答案1

得分: 2

最简单的方法是使用弹性盒布局（flexbox）。你可以在body元素上应用适当的类（d-flex flex-column vh-100），然后使用mt-auto来将页脚固定在底部。最后，在容器上添加overflow-auto类，以便页面的其余部分可以根据需要滚动。

<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

英文:

The easiest way is to use a flexbox layout. You can put the appropriate classes (d-flex flex-column vh-100) on the body, and then use mt-auto to force the footer to the bottom. Finally, place overflow-auto on the container so the rest of the page can scroll as needed.

&lt;html&gt;
&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot; integrity=&quot;sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;/head&gt;
&lt;body class=&quot;d-flex flex-column vh-100&quot;&gt;

<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>

&lt;/html&gt;

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

EDIT:

If you only want the footer to be visible after scrolling large content just change vh-100 to min-vh-100

https://codeply.com/p/273L716IHN

答案2

得分: 1

使用min-height。

查看下面的代码片段。

body {
  min-height: 100vh;
}

.content {
  min-height: calc(100vh - 64px); /* 64px是您页脚的高度 */
}

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>

编辑后的代码片段：

const footerHeight = $("footer").height();
$(".container.content").css("min-height", "calc(100vh - " + footerHeight + "px)");

body {
  min-height: 100vh;
}

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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</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>

英文:

Use min-height.

See the snippet below.

body {
  min-height: 100vh;
}

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

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

&lt;html&gt;

&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot; integrity=&quot;sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div class=&quot;container content&quot;&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
  &lt;/div&gt;

  &lt;footer class=&quot;bg-black text-white&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;p&gt;This should be at the bottom of the page&lt;/p&gt;
      &lt;p&gt;This should be no white band below this&lt;/p&gt;
    &lt;/div&gt;
  &lt;/footer&gt;


  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;

EDIT

const footerHeight = $(&quot;footer&quot;).height();
$(&quot;.container.content&quot;).css(&quot;min-height&quot;, &quot;calc(100vh - &quot; + footerHeight + &quot;px)&quot;);

body {
  min-height: 100vh;
}

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

&lt;html&gt;

&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css&quot; integrity=&quot;sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=&quot; crossorigin=&quot;anonymous&quot;&gt;

  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div class=&quot;container content&quot;&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
    &lt;p&gt;Content&lt;/p&gt;
  &lt;/div&gt;

  &lt;footer class=&quot;bg-black text-white&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;p&gt;This should be at the bottom of the page&lt;/p&gt;
      &lt;p&gt;This should be no white band below this&lt;/p&gt;
    &lt;/div&gt;
  &lt;/footer&gt;

  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

垂直对齐页脚到页面底部（Bootstrap 5）

问题

答案1

答案2

在Safari版本16上，Flexbox列中的”Align items”属性不起作用。

浏览器悬停事件过慢

如何在 div 盒子内居中按钮？

JavaScript和媒体查询之间的”冲突”？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论