這個問題在這里已經有了答案： 頁面或內容底部的頁腳，以較低者為準 4 個答案 5 小時前關閉。
我按照本教程創建了一個頁腳。
我創建了這樣的頁腳（正文中沒有任何內容）：
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer{
margin-top: auto;
background-color: greenyellow;
}
.card {
max-width: 400px;
margin: 0auto;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
top: 611px;
margin-bottom: 33px;
margin-right: 33px;
float: left;
}
.card img{
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id{
background-color: palevioletred;
color: white;
margin: 0;
font-size: 17px;
}
.number{
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
@media (max-width: 1864px){
.card{
max-width: 300px;
}
.price{
font-size:20px;
}
.card img{
height: 300px;
width: 300px;
}{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
<h1>header</h1>
</head>
<body style="background-color: #36454F;">
<footer class="footer">
<h3 >hello</h3>
</foote>
</body>
</html>我在 django 中使用 for 回圈在 html 的主體中添加了一些內容：
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
<h1>header</h1>
</head>
<body style="background-color: #36454F;">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
<footer class="footer">
<h3 >hello</h3>
</foote>
</body>
</html>但頁腳不在網頁底部：
圖片
我應該怎么做才能使頁腳始終位于產品的底部？
uj5u.com熱心網友回復：
您可以使用帶有以下內容的容器position: relative; min-height: 100vh;和帶有頁腳的頁腳position: absolute：
.container {
position: relative;
min-height: 100vh;
padding-bottom: 50px; /* Height of the footer */
}
.content {
height: 50px;
}
.footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
background: grey;
}<div class="container">
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>對于更長的內容，它看起來像這樣：
顯示代碼片段
.container {
position: relative;
min-height: 100vh;
padding-bottom: 50px; /* Height of the footer */
}
.content {
height: 1000px;
}
.footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
background: grey;
}<div class="container">
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>uj5u.com熱心網友回復：
footer {
position: fixed;
bottom: 0;
width: 100%;
}
uj5u.com熱心網友回復：
.footer {
position: absolute;
bottom: 10px;
width: 100%;
}
.body{
position: relative;
min-height: 100%;
padding-bottom: 12rem;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/484499.html
標籤：javascript html css django django-rest-framework