页脚始终位于底部但不固定
Posted
技术标签:
【中文标题】页脚始终位于底部但不固定【英文标题】：Footer to be always at bottom but not fixed 【发布时间】：2020-12-05 15:07:38 【问题描述】：如何让引导？
例如在下面的代码中，页脚应该在底部。 （页脚后的空白应在页脚前）。这可以通过使用sticky-bottom来实现，但是当内容比较多的时候（页面会滚动的时候），会固定到最后不会显示出来。
如何实现？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>VN Parcel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light self-navbar">
<a class="navbar-brand" href="'.$website_address.'"><img src="https://ui-avatars.com/api/?name=VN&rounded=true&format=svg" title="'.$title.'" loading="lazy" /> '.$title.'</a>
<ul class="navbar-nav self-first-ul">
'.$website_slogan.'
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto self-second-ul">
<li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/91'.$website_wamobile.'"><i class="fab fa-whatsapp"></i> '.$website_wamobile.'</a></li>
<li class="nav-item"><a class="nav-link" href="mailto:'.$website_email.'"><i class="far fa-envelope"></i> '.$website_email.'</a></li>
<li class="nav-item"><a class="nav-link" href="tel:'.$website_mobile.'"><i class="fas fa-mobile-alt"></i> '.$website_mobile.'</a></li>
</ul>
</div>
</nav>
<div class="container p-3 bg-white rounded">
<div class="row">
<label for="Number">Track your parcel here <i class="far fa-hand-point-down far-blink"></i></label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search" aria-label="Number" aria-describedby="basic-addon2" id="number" name="srch_num">
<div class="input-group-append">
<input type="submit" class="btn btn-success" id="submit-addon2" value="Search" />
</div>
</div>
</div>
</div>
<footer class="footer">
<nav class="navbar bottom navbar-expand-lg navbar-light bg-light self-navbar">
<a class="navbar-brand" href="'.$website_address.'"><img src="https://ui-avatars.com/api/?name=VN&rounded=true&format=svg" title="'.$title.'" loading="lazy" /> '.$title.'</a>
<ul class="navbar-nav self-first-ul">
'.$website_slogan.'
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto self-second-ul">
<li class="nav-item"><a class="nav-link" target="_blank" href="https://wa.me/91'.$website_wamobile.'"><i class="fab fa-whatsapp"></i> '.$website_wamobile.'</a></li>
<li class="nav-item"><a class="nav-link" href="mailto:'.$website_email.'"><i class="far fa-envelope"></i> '.$website_email.'</a></li>
<li class="nav-item"><a class="nav-link" href="tel:'.$website_mobile.'"><i class="fas fa-mobile-alt"></i> '.$website_mobile.'</a></li>
</ul>
</div>
</nav>
</footer>
</body>
</html>【问题讨论】：
这样的？ jsfiddle.net/8wLbsk3q @dave 相当，但不完全。我认为您可以修复底部填充问题并将其作为答案发布jsfiddle.net/u5w4j2vn 是的，我遇到了同样的问题，我发现的唯一方法是在 body 中设置 min-height。我不知道这是否是最好的解决方案，但它确实有效。 @dave 当页脚很大并且容器有更多文本时，它不会滚动。 jsfiddle.net/mepfq8cd/1 可能是这样的吗？ jsfiddle.net/y72L69n1。否则，您需要知道页脚有多大，并将 body padding-bottom 设置为该数字，以便绝对定位的页脚不会阻塞东西 【参考方案1】：你的问题是你的页脚在你的身体底部，但你的身体比你的页面小
您应该使用此 css 示例为您的身体添加一个最小高度
body
min-height: 100vh;
position: relative;
.footer
position: absolute;
bottom: 0;
left: 0;
right: 0
【讨论】：
确实，你得把你的页脚的位置设置在底部，我编辑了我的帖子 嗯，我决定删除<nav class="navbar bottom navbar-expand-lg navbar-light bg-light self-navbar"> 并保持其他人不变。这样做时，我发现页脚与正文重叠。以上是关于页脚始终位于底部但不固定的主要内容，如果未能解决你的问题，请参考以下文章