如何解决为什么产品卡进入页脚？
这是我的代码：
https://codepen.io/malyikaj/pen/QWKNVzN
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script',cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body {
font-family: 'Montserrat',sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav {
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script',cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script',cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0,0.2);
}
.container {
padding: 2px 16px;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover {
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn {
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#page-container {
position: relative;
min-height: 100vh;
}
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins',sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
position: absolute;
bottom: 0;
height: 60px;
width: 100vw;
/* position: fixed;
z-index: 1; */
}
@media (max-width: 952px) {
label.logo {
font-size: 30px;
padding-left: 50px;
}
nav ul li a {
font-size: 16px;
}
}
@media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,a.active {
background: none;
color: #e18e96;
}
#check:checked~ul {
left: 0;
}
}
section {
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght@100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<div>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact </a></li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie,Oreo cookie center,topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>,but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<!--
background-color: #434a52;
Slutty Brownie
Bite into a base layer of chocolate chip cookie,middle layer of Oreo Cookie,and decadent a top layer of brownie. Gluten free. Nut Free. Vegan.
You may not be its first…but this is THE first ever product from Sweet T’s. Heart shaped,because it was made with love!
Slutty Blondie
Vegan white Chocolate Blondie with vanilla Oreo style in the middle and cookie on the bottom. Blondes have more fun.Decadent.
Slutty Pumpkin Cheesecake
Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Caramel Apple Pie Cookie
Sugar cookie dough baked with apple pie filling. Topped with sugar cookie lattice pie top. These are the newest homemade sweets that makes an utterly divine dessert. A great desert when you’re craving apple pie—but not the ENTIRE apple pie.
Pumpkin Cheesecake Muffin
Came for the fall and stayed a favorite. *Seasonal* #NomNom
S’Mores Cookies
Chocolate chip cookie with melted vegan marshmallow in the middle. Outrageously good.
Chocolate Chip Cookies
Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Birthday? Anniversary? Work Event? Customizable orders available,just contact us.
Find us:
Uber Eats
GrubHub
Bougie Brews: 52 Main St,Yonkers,NY 10701
VeganDale Food Fest
Baked a cake for Wikipedia
Cupcake cutie boutique: 8 S 6th Ave,Mt Vernon,NY 10550 (Enjoy two dollar Tuesdays)
Vegan Grille 1201 1201 Castle Hill Ave,The Bronx,NY 10462
Pizza Gusta Super Foodtown of Throggs Neck : 2945-65 Bruckner Blvd,NY 10465
Plantega
Stay sweet my friends.
Instagram : sweet_teees
Phone: 914-297-9439
Email Us: sweettvegan@gmail.com
Sweet simple vegan included my sweets in their 2020 holiday gift guide.
made with all natural and wholesome ingredients.
</main>
Email Code
<a href="mailto:sweettvegan@gmail.com=?subject=Sweet%20T%20Customer%20Support">Email Us</a>
Email sign up
<input type="text" placeholder="Enter email">
<input type="submit" value="Signup">
-->
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer">
<p class=c opyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</div>
</body>
</html>我的页脚也没有扩展到视口的全长。我的产品卡一直到页面底部。有什么想法吗？
解决方法
页脚标签在#card div 内，而#card div 在左侧有一个边距。这就是它没有使用整个屏幕宽度的原因。
您需要将其移动到 <body> 标签内和 #card div 之后。但是这样做之后，页脚会处于一个疯狂的位置，因为它有一个 position: absolute，只需删除 position 属性，它就会起作用。我会放上代码片段。
您的卡片高度问题是您在 #page-container 中使用了高度 100vh，这使得 div 超出了必要的范围。将其更改为 height: 100% 会起作用。而且我还建议在 #page-container 的底部设置边距和填充。
像这样：
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
/* * { border: 1px solid black; } */
html {
}
* {
box-sizing: border-box;
}
.slutty-title {
text-align: font-size: 40px;
font-family: 'Dancing Script',cursive;
color: #d98695;
font-size: 40px;
font-weight: bold;
padding-left: 120px;
}
.brownie-title {
font-size: 30px;
font-weight: bold;
color: #76341e;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0.2);
max-width: 440px;
font-family: arial;
margin-left: 50px;
}
.italic {
font-style: italic;
font-weight: bolder;
}
.bold {
font-weight: bold;
color: #76341e;
letter-spacing: 1.5px;
}
p {
line-height: 1.4;
padding: 0px 20px;
}
.price {
font-size: 28px;
text-align: center;
color: #d98695;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #d98695;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
body{
font-family: 'Montserrat',sans-serif;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
nav{
background: #d98695;
height: 80px;
width: 100vw;
}
label.logo {
color: white;
font-size: 65px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
font-family: 'Dancing Script',cursive;
letter-spacing: 3px;
}
label.logo-2 {
margin: -100px;
line-height: 80px;
color: white;
font-size: 25px;
padding: 0px;
font-family: 'Dancing Script',cursive;
letter-spacing: 1px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 16px 24px 0 rgba(0,0.2);
}
.container {
padding: 2px 16px;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-decoration: none;
}
a:hover{
transition: .3s;
text-transform: none;
background: #df99a6;
}
.checkbtn{
font-size: 30px;
color: #df99a6;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
<!-- changed -->
#page-container {
position: relative;
min-height: 100%;
padding-bottom: 15px;
margin-bottom: 15px;
}
<!-- changed -->
footer {
box-sizing: border-box;
place-items: center;
font-family: 'Poppins',sans-serif;
text-align: right;
background-color: #d98695;
color: white;
padding: 0px;
bottom: 0;
height: 60px;
width: 100vw;
z-index: 1; */
}
@media (max-width: 952px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
}
@media (max-width: 858px){
.checkbtn{
display: block;
}
ul{
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li{
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #e18e96;
}
#check:checked ~ ul{
left: 0;
}
}
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Sweet T's Vegan Bakery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Montserrat:wght@100;400&family=Nerko+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Sweet T's </label>
<label class="logo-2">Vegan Bakery</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">About</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">Contact </a></li>
</ul>
</nav>
</header>
<main>
<h2></h2>
<div class="card">
<img src="http://placeimg.com/440/280/any"><alt="Denim Jeans" style="width:100%">
<div class =fonts>
<span class ="slutty-title">Slutty</span>
<span class ="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie,Oreo cookie center,topped with a dense layer of brownie.
<br>
<br>
You may not be its <span class="italic">first</span>,but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
<div id="page-container">
</div>
<div id="content-wrap">
<!-- all other page content -->
</div>
</div>
<!-- changed location -->
<footer id="footer">
<p class= copyright>©2021 Sweet T's Vegan Bakery</p>
</footer>
</body>
</html>有关如何改进代码的更多提示，我建议： CSS Units 和 How to debug your front-end
,您刚刚忘记关闭 <div> 标签。一旦你解决了这个问题，你的问题就会消失。
<div class="card">
<img src="http://placeimg.com/440/280/any">
<alt="Denim Jeans" style="width:100%">
<div class=fonts>
<span class="slutty-title">Slutty</span>
<span class="brownie-title">Brownie</span>
<p>One layer of chocolate chip cookie,topped with a dense layer of brownie.
<br>
<br> You may not be its <span class="italic">first</span>,but this is the first ever product by Sweet T’s. Heart shaped because it's made with love.
<br>
<br>
<span class="bold">Gluten free. Nut free. Vegan.</span>
<p class="price">$5.00</p>
</p>
<p><button>Add to Cart</button></p>
</div>
</div>
我在最后添加了 </div>。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。