我必须为大学设计一个网上商店，我遇到了麻烦，我找不到问题。在某些页面上，当我看平板电脑或移动的版本时，HTML标签后有这么多的空间。我找不到错误。这只发生在一半的页面上，而不是每一页。
我试着在CSS中注解掉几行代码（body -min-height和content），但没有任何作用。我还检查了我是否忘记关闭某个标签。没有任何东西似乎工作，我绝望了，请帮助。
* {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
color: cornsilk;
box-sizing: border-box;
}
.registrierungLabel {
color: rgba(126, 79, 24, 0.514);
}
a {
color: rgb(184, 107, 82);
text-decoration: none;
}
a:hover {
color: cornsilk;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0;
/* Remove scrollbar space */
background: transparent;
/* Optional: just make scrollbar invisible */
}
body {
padding-top: 140px;
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: auto;
background-color: #e9aa83;
}
.btn {
border-style: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
.btn-primary {
background-color: cornsilk;
color: rgb(184, 107, 82);
}
.btn:hover {
background-color: rgb(184, 107, 82);
color: cornsilk !important;
}
.accordion-item {
border-color: rgba(135, 74, 54, 0.79);
}
@media screen and (max-width: 768px) {
.card-image {
width: 300px;
}
.card-products {
width: 300px;
}
}
.card-products {
padding-left: 0px;
padding-right: 0px;
}
.content {
min-height: calc(100% - 50px);
padding-bottom: 50px;
}
.navbar {
background-color: #e9aa83;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>guapo. | Hilfe</title>
<link rel="icon" href="images/clementine.png" sizes="16x16 32x32" type="image/png" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<link rel="stylesheet" href="css/stylesheet.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
</head>
<body>
<div id="navbar"></div>
<div class="container content">
<p>
Durch Klick auf gewünschten Tab gelangst du zur gewünschten Seite.
<br /> Bei Fragen und Anregungen wende dich bitte an uns: <a href="mailto:[email protected]">
[email protected]
</a>
</p>
<h2>FAQs</h2>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="background-color: rgba(194, 116, 79, 0.877); color: cornsilk;">
Wie lange dauert die Lieferung meiner Bestellung?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body" style="background-color: rgba(194, 115, 79, 0.721);">
Wir versenden aus Österreich nach ganz Europa. In der Regel dauert dies 3-5 Werktage.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="background-color: rgba(194, 116, 79, 0.877); color: cornsilk;">
Kann ich meine Bestellung zurücksenden oder umtauschen?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body" style="background-color: rgba(194, 115, 79, 0.721);">
Ja, du kannst deine Bestellung innerhalb von 14 Tagen nach Erhalt zurücksenden oder umtauschen. Bitte beachte, dass die Artikel ungetragen und in ihrem ursprünglichen Zustand sein müssen.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="background-color: rgba(194, 116, 79, 0.877); color: cornsilk;">
Welche Zahlungsmethoden akzeptiert der Shop?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body" style="background-color: rgba(194, 115, 79, 0.721);">
Wir akzeptieren Kreditkarten, PayPal, Sofortüberweisung und Vorkasse.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="background-color: rgba(194, 116, 79, 0.877); color: cornsilk;">
Wie pflege ich die Kleidungsstücke richtig?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body" style="background-color: rgba(194, 115, 79, 0.721);">
Die Pflegeanweisungen findest du auf dem Etikett jedes Artikels. Bitte beachte, dass manche Artikel professionell gereinigt werden sollten oder auf niedriger Temperatur gewaschen werden müssen.
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
<script src="./javascript/main.js"></script>
</body>
</html>
1条答案
按热度按时间js4nwp541#
你忘了给尸体给予高度。只是简单地给予高度：100vh，它会工作得很好。我希望这就是问题所在，如果不是，请让我知道，我们可以制定一个不同的解决方案