我的页脚不会到达特定页面的底部。相反，它偏离了产品容器的中间。
基本代码如下:
base.html:
<html>
<header>
<nav>
<div>
<a href="{{ url_for('index') }}">Home</a>
<a href="{{ url_for('shop') }}">Shop</a>
<a href="{{ url_for('cart') }}">Cart</a>
</div>
</nav>
</header>
<body>
<div id="app">
{% block content %}{% endblock %}
</div>
</body>
<footer>
<nav>
<div class="terms">
<a href='/terms'>Terms of Service</a>
<p>All Rights Reserved.</p>
<p>Copyright © 2023</p>
</div>
</nav>
</footer>
</html>
shop.html:
...
{% block content %}
<div class="product-container">
{% for product in products %}
<div onclick = "location.href='{{ url_for('product_detail', product_name = product.name) }}'" class="product">
<img src="{{ url_for('static', filename = product.image_url) }}" alt="{{ product.name }} Image">
<h2 class="product-title">{{ product.name }}</h2>
<p class="product-price">${{ product.price }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
...
shop.css
@media only screen and (max-width: 600px) {
.product-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 20px;
max-height: calc(100vh - 300px);
z-index: 1;
flex-grow: 1;
}
}
.product {
position: relative;
cursor: pointer;
border: solid 1px #ddd;
box-shadow: 0px 2px 2px rgb(0, 0, 0, 0.3);
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-basis: calc(50% - 20px);
justify-content: space-between;
height: 400px;
margin: 0;
text-align: center;
width: 300px;
}
main.css
html, body {
margin: 0;
padding: 0;
width: 100%;
}
#app {
display: flex;
flex-direction: column;
padding-top: 0;
padding-bottom: 210px;
}
@media screen and (max-width: 600px) {
footer p, footer a {
font-size: 12px!important;
}
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
footer {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
position: sticky;
bottom: 0;
}
}
我希望这是足够的信息。如果有什么我需要改变的，请告诉我。
.product-container 似乎没有注册为 div。页脚仅在中间接合。
我看了十几篇文章(超过5篇堆栈溢出)。他们都没有解决这个问题。
您可以找到完整代码here .
最佳答案
我建议您将样式表代码减少到最基本的部分。这使您更容易找到可能的错误。
为了防止内容覆盖页脚，您应该删除包含 z-index: 1; 的行。
此外，图像的大小必须限制为父元素。为此，我添加了以下代码。
.product > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
如果没有足够的内容可显示，则存在页脚向上滑动的风险。为了防止这种情况，请分配以下属性，以便 body 元素具有最小大小，并且 #app 容器增大。
body {
/* ... */
display:flex;
flex-direction:column;
min-height:100vh;
}
#app {
/* ... */
flex:1;
}
所有更改都可以在下面的代码部分中找到。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block head -%}
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
{% endblock -%}
</head>
<body>
<header>
<nav>
<a href="{{ url_for('index') }}">Home</a>
<a href="{{ url_for('shop') }}">Shop</a>
<a href="{{ url_for('cart') }}">Cart</a>
</nav>
</header>
<div id="app">
{% block content -%}{% endblock -%}
</div>
<footer>
<nav class="terms">
<a href='/terms'>Terms of Service</a>
<p>All Rights Reserved.</p>
<p>Copyright © 2023 - Archie Swag</p>
</nav>
</footer>
{% block scripts -%}
<script src="{{ url_for('static', filename='index.js') }}"></script>
{% endblock -%}
</body>
</html>
{% extends 'base.html' %}
{% block title %}Shop{% endblock %}
{% block head -%}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='shop.css') }}">
{% endblock -%}
{% block content -%}
<div class="product-container">
{% for product in products -%}
<a href="{{ url_for('product_detail', product_name=product.name) }}" class="product">
<img src="{{ url_for('static', filename=product.image_url) }}" alt="{{ product.name }} Image">
<h2 class="product-title">{{ product.name }}</h2>
<p class="product-price">${{ product.price }}</p>
</a>
{% endfor -%}
</div>
{%- endblock%}
{% block scripts -%}
{{ super() }}
{% endblock -%}
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: Helvetica;
background-color: white;
display:flex;
flex-direction:column;
min-height:100vh;
}
header {
background-color: #4CAF50;
padding: 10px;
}
header nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav a {
text-decoration: none;
color: #ffffff;
font-size: 18px;
margin-right: 20px;
}
nav a:hover {
color: lightgray;
}
#app {
margin: 2.4rem 1.2rem;
flex:1;
}
footer {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
font-size: 14px;
}
footer a {
color: white! important;
text-decoration: none;
}
.product-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
justify-items: center;
}
.product {
border: solid 1px #ddd;
box-shadow: 0px 2px 2px rgb(0, 0, 0, 0.3);
text-align: center;
text-decoration: none;
color: back;
}
.product:active > *,
.product:hover > *,
.product:visited > *
{
color: black;
}
.product > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
.product .product-title {
font-size: 18px;
font-weight: bold;
margin: auto;
bottom: 40px;
}
.product .product-price {
font-size: 16px;
color: #04AA6D;
font-weight: bold;
margin: auto;
bottom: 10px;
}
@media only screen and (max-width: 600px) {
.product-container {
grid-template-columns: repeat(1, 1fr);
}
}
关于html - 粘性页脚隐藏内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76691645/