我在我的项目中使用bootstrap，当页面内容不足以到达页面底部时，我想把页脚放在屏幕的最后。另一方面，当页面内容较大时，我需要滚动页面才能到达页面底部，我希望页脚位于内容之后，而不需要覆盖。
最后，我希望页脚有通常的行为，固定在底部时，页面太短，内容后没有覆盖它，如果我可以滚动页面。
现在，我有我的代码，它是固定在屏幕底部，它涵盖了几乎在年底的内容。
我的代码如下（不要介意php）：
<footer class="container-fluid bg-black mt-5 fixed-bottom">
<div class="row align-items-center">
<div class="col-md-3">
<p class="text-center mb-0">
<a href="#" class="text-decoration-none">
<i class="bi bi-twitter fs-4 p-2 twitter_white"></i>
</a>
</p>
</div>
<div class="col-md-3">
<p class="text-center align-bottom mb-0" style="color: white">
<i class="bi bi-telephone-fill pe-2" style="color: white"></i>
XXX XXX XXX
</p>
</div>
<div class="col-md-3">
<p class="text-center align-bottom mb-0" style="color: white">
<i class="bi bi-envelope pe-2" style="color: white"></i>
example@gmail.com
</p>
</div>
<div class="col-md-3 text-center">
<a class="dropdown-toggle white_links" href="#" role="button" data-bs-toggle="dropdown">
<?php if ($_SESSION['lang'] == "es") echo '<span id="es_flag" class="fi fi-es flag_icon_rounded"></span>';
else if ($_SESSION['lang'] == "en") echo '<span id="en_flag" class="fi fi-gb flag_icon_rounded"></span>';
else echo '<span id="cat_flag" class="fi fi-es-ct flag_icon_rounded">'; ?>
</a>
<ul class="dropdown-menu">
<li><a href="/index.php?action=change_language&lang=cat"><span id="cat_flag" class="fi fi-es-ct flag_icon_rounded"></span><label class="label_flags black_links" for="cat_flag">Català</label></a></li>
<li><a href="/index.php?action=change_language&lang=es"><span id="es_flag" class="fi fi-es flag_icon_rounded"></span><label class="label_flags black_links" for="es_flag">Español</label></a></li>
<li><a href="/index.php?action=change_language&lang=en"><span id="en_flag" class="fi fi-gb flag_icon_rounded"></span><label class="label_flags black_links" for="en_flag">English</label></a></li>
</ul>
</div>
</div>
<div class="row align-items-center">
<hr class="m-0 p-0" style="color: white">
<div class="col-md text-center">
<p class="pb-2 pt-2 m-0" style="color: white">
© 2023 <?php echo $GLOBALS['translation']['association']." " ?>
</p>
</div>
</div>
</footer>
1条答案
按热度按时间yzuktlbb1#
页脚在滚动时不会沿着，因为当您使用类
.fixed-bottom时，它会将position: fixed;应用于页脚;将其从正常文档流中删除。阅读更多有关position: fixed功能的信息。下面是一个你想要的行为的例子。第一个代码段没有滚动条，第二个代码段有垂直滚动条。第三个代码段是一个例子，在页脚使用弹性增长和自动边距。
html和body正常工作，需要使用类h-100将其设置为height: 100%（或100vh）。*在
<main>中添加<div style="height: 1000px;"></div>时，页脚随内容向下移动（其他内容不变）：下面是在
<main>上使用flex-grow-1与在<footer>上使用usingmt-auto的示例：