为什么产品卡进入页脚？答案

【问题标题】：Why is product card going into footer?为什么产品卡进入页脚？
【发布时间】：2021-04-15 15:39:35
【问题描述】：

这是我的代码：

@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, 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, 0, 0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 16px 24px 0 rgba(0, 0, 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, consectetur adipiscing elit, 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, The Bronx, 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>&copy;2021 Sweet T's Vegan Bakery</p>
            </footer>
          </div>

</body>

</html>

我的页脚也没有扩展到视口的全长。我的产品卡一直到页面底部。有什么想法吗？

【问题讨论】：

标签： html css footer card

【解决方案1】：

页脚标签在#card div 内，#card div 在左侧有一个边距。这就是它没有使用整个屏幕宽度的原因。

您需要将其移动到 <body> 标记内，并在 #card div 之后。但是在这样做之后，页脚会处于一个疯狂的位置，因为它有一个position: absolute，只需删除位置属性，它就会工作。我只是把sn-p放进去。

您的卡片高度问题是您在#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, 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,0,0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 16px 24px 0 rgba(0,0,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>&copy;2021 Sweet T's Vegan Bakery</p>
      </footer>
   </body>
</html>

有关如何改进代码的更多提示，我建议： CSS Units 和 How to debug your front-end

【讨论】：

【解决方案2】：

您只是忘记关闭您的<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, 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>

我在末尾添加了</div>。

【讨论】：