即使页面半空，如何将页脚设置为底部？ [复制]
Posted
技术标签:
【中文标题】即使页面半空，如何将页脚设置为底部？ [复制]【英文标题】：How to set footer to bottom even page is half empty? [duplicate] 【发布时间】：2021-02-21 10:07:21 【问题描述】：这是 .html 文件
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
<title>% block title% % endblock %</title>
<style>
% block css %
#content-wrap
padding-bottom: 2.5rem;
/* Footer height */
#footer
position: bottom;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
body
margin: 0px;
min-height: 50%;
padding: 0px;
position: absolute;
width: 100%;
h1
margin-bottom: 0.5rem;
margin-right: 8.5rem;
/* font-style: unset; */
font-weight: 300;
color: aliceblue;
font-family: 'Amatic SC', cursive;
.py-4
padding-bottom: 0.5rem;
padding-top: 0.5rem;
% endblock %
</style>
</head>
<body style="background-color:aliceblue;">
% load static %
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/">
STH</a>
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/shop">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Our Blog</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/shop/tracker">Track Order</a>
<a class="dropdown-item" href="/shop/checkout">Checkout</a>
</div>
</li>
</ul>
<button type="button" class="btn btn-warning mx-3" onclick='clearCart()' id ='clearCart'>ClearCart</button>
</div>
<form method='get' action='/shop/search/' class="form-inline my-2 my-lg-0" >
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" id="search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button type="button" class="btn btn-dark mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" >
Cart(<span id="cart">0</span>)
</button>
</nav>
<div id="wrapper" class="wrapper">
<span id="typed"></span>
</div>
% block body %
% endblock %
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
% block js %
% endblock %
<footer class="footer py-3 bg-dark text-light" id="footer">
<div class="container">
<p class="mb-0 text-center">© storestohomes.com</p>
<p class="mb-0 text-center">
<a href="" onclick="topFunction()" id="myBtn">Back to top |</a>
<a href="#">Privacy |</a>
<a href="#">Terms</a>
</p>
</div>
</footer>
</body >
</html>
如果有人可以告诉我我错在哪里，请告诉我。即使页脚为空，我也无法将页脚设置为页面底部。 请如果有人可以告诉我我错在哪里。即使页脚为空，我也无法将页脚设置为页面底部。 请如果有人可以告诉我我错在哪里。即使页脚为空，我也无法将页脚设置为页面底部。 请如果有人可以告诉我我错在哪里。即使页脚为空，我也无法将页脚设置为页面底部。 请如果有人可以告诉我我错在哪里。即使页脚为空，我也无法将页脚设置为页面底部。
【问题讨论】：
试试这个身体 min-height: 95vh; @AmirSaleem 不工作 同一个问题真的有必要说5遍吗？ 【参考方案1】：将页脚固定在底部或将高度100vh 设置为正文页。
#footer
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
【讨论】：
仍然没有改善【参考方案2】：试试下面的代码。它非常自我解释。
HTML
<div id="container">
<div id="header">
HEADER
</div>
<div id="body">
BODY
</div>
<div id="footer">
FOOTER
</div>
</div>
CSS
html,
body
margin:0;
padding:0;
height:100%;
#container
min-height:100%;
position:relative;
#header
background:#ff0;
padding:10px;
#body
padding:10px;
padding-bottom:60px; /* Height of the footer */
#footer
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
这里有一些可选方法可供参考。 https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
【讨论】：
【参考方案3】：我在#footer 中更改了一些 CSS，您可以看看是否有帮助让我知道
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap"
rel="stylesheet"
/>
<title>% block title% % endblock %</title>
<style>
% block css %
#content-wrap
padding-bottom: 2.5rem;
/* Footer height */
#footer
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
/* margin-bottom: 0px; */
body
margin: 0px;
min-height: 100%;
padding: 0px;
width: 100%;
h1
margin-bottom: 0.5rem;
margin-right: 8.5rem;
/* font-style: unset; */
font-weight: 300;
color: aliceblue;
font-family: 'Amatic SC', cursive;
.py-4
padding-bottom: 0.5rem;
padding-top: 0.5rem;
% endblock %
</style>
</head>
<body style="background-color: aliceblue;">
% load static %
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/"> STH</a>
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/shop"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Our Blog</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/shop/tracker">Track Order</a>
<a class="dropdown-item" href="/shop/checkout">Checkout</a>
</div>
</li>
</ul>
<button
type="button"
class="btn btn-warning mx-3"
onclick="clearCart()"
id="clearCart"
>
ClearCart
</button>
</div>
<form
method="get"
action="/shop/search/"
class="form-inline my-2 my-lg-0"
>
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
name="search"
id="search"
/>
<button class="btn btn-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
<button
type="button"
class="btn btn-dark mx-2"
id="popcart"
data-container="body"
data-toggle="popover"
data-placement="bottom"
data-html="true"
>
Cart(<span id="cart">0</span>)
</button>
</nav>
<div id="wrapper" class="wrapper">
<span id="typed"></span>
</div>
% block body % % endblock %
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"
></script>
% block js % % endblock %
<footer class="footer py-3 bg-dark text-light" id="footer">
<div class="container">
<p class="mb-0 text-center">© storestohomes.com</p>
<p class="mb-0 text-center">
<a href="" onclick="topFunction()" id="myBtn">Back to top |</a>
<a href="#">Privacy |</a>
<a href="#">Terms</a>
</p>
</div>
</footer>
</body>
</html>【讨论】：
【参考方案4】：这是一个使用flex 的非常好的解决方案。我将所有东西都包装在一个.main 容器中——父容器。我还在css 中标记了所有更改。我想用absolute positioning 给你第二个解决方案，但你已经得到了这样的解决方案。
#content-wrap
padding-bottom: 2.5rem;
/* Footer height */
#footer
/*position: bottom;*/
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
flex: 0 0 auto; /*add*/
body
margin: 0px;
min-height: 50%;
padding: 0px;
position: absolute;
width: 100%;
height: 100vh; /*add*/
.main
display: flex; /*add*/
flex-direction: column; /*add*/
min-height: 100%; /*add*/
.wrapper
height: 100%; /*add*/
flex: 1 0 auto; /*add*/
h1
margin-bottom: 0.5rem;
margin-right: 8.5rem;
/* font-style: unset; */
font-weight: 300;
color: aliceblue;
font-family: 'Amatic SC', cursive;
.py-4
padding-bottom: 0.5rem;
padding-top: 0.5rem;
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
<body style="background-color:aliceblue;">
<div class="main">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/">
STH</a>
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/shop">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Our Blog</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/shop/tracker">Track Order</a>
<a class="dropdown-item" href="/shop/checkout">Checkout</a>
</div>
</li>
</ul>
<button type="button" class="btn btn-warning mx-3" onclick='clearCart()' id ='clearCart'>ClearCart</button>
</div>
<form method='get' action='/shop/search/' class="form-inline my-2 my-lg-0" >
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" id="search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button type="button" class="btn btn-dark mx-2" id="popcart" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" >
Cart(<span id="cart">0</span>)
</button>
</nav>
<div id="wrapper" class="wrapper">
<span id="typed"></span>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<footer class="footer py-3 bg-dark text-light" id="footer">
<div class="container">
<p class="mb-0 text-center">© storestohomes.com</p>
<p class="mb-0 text-center">
<a href="" onclick="topFunction()" id="myBtn">Back to top |</a>
<a href="#">Privacy |</a>
<a href="#">Terms</a>
</p>
</div>
</footer>
</div>
</body >【讨论】：
以上是关于即使页面半空，如何将页脚设置为底部？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章