我正在处理的这段代码有问题。页面底部有一个空白区域，宽度为1024px或更高，这是我无法摆脱的。
我尝试添加一个底部填充，检查边距，检查高度，但是没有任何效果。我仍然是初学者，所以我可能会错过一些东西。任何帮助将不胜感激。谢谢
我尝试了高度：calc（100vh-21px）;而这发生了 Screenshot 3
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* STYLING */
body{
background: hsl(0, 100%, 98%);
}
/* HEADER */
.logo{
width: 28%;
margin: 1.5em;
}
.hero-mobile{
width: 100%;
}
.hero-desktop{
display: none;
}
.logo-desktop{
display: none;
}
/* MAIN SECTION */
.main{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
color: hsl(0, 36%, 70%);
font-weight: 300;
font-size: 16px;
margin: 2em;
}
h1{
text-transform: uppercase;
font-weight: 300;
font-size: 2.5rem;
margin: 1em auto;
letter-spacing: 12px;
}
.soon{
font-weight: 600;
color: black;
}
.main p{
line-height: 1.5em;
}
/* EMAIL */
.email-form{
text-align: center;
width: 100%;
}
.email{
border-radius: 40px;
border: 1px solid;
color: hsl(0, 36%, 70%);
width: 70%;
height: 50px;
padding: 0px 25px;
}
.email::placeholder{
color: hsl(0, 36%, 70%);
}
.email:focus{
outline: none;
}
.btn{
width: 70px;
height: 53px;
border-radius: 40px;
border-style: none;
background:
linear-gradient(135deg, hsl(0, 80%,86%), hsl(0, 74%, 74%));
position: absolute;
right: 10%;
box-shadow: 0 5px 20px 0 hsl(0, 36%, 70%);
}
footer{
margin: 10% auto 1% auto;
}
@media only screen and (min-width: 600px){
.main{
margin: 9% 15%;
}
.main h1{
font-size: 4rem;
}
.email{
width: 50%;
}
.btn{
right: 25%;
}
.btn:hover{
width: 90px;
box-shadow: 0 5px 20px 0 hsl(0, 36%, 70%);
background:
linear-gradient(135deg, hsl(0, 80%,86%), hsl(0, 74%, 86%));
cursor: pointer;
transition: width 0.5s;
}
.btn:active{
outline: none;
}
}
/* BIG SCREEN */
@media only screen and (min-width: 1024px){
.logo{
display: none;
}
.logo-desktop{
display: block;
}
.hero-mobile{
display: none;
}
.container{
display: flex;
flex-direction: row-reverse;
height: 100vh;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
/* MAIN SECTION */
.hero{
/* fixed resizing by putting image in css instead of html */
background: url(../images/hero-desktop.jpg) no-repeat center;
background-size: cover;
width: 40%;
}
.left{
background: url(../images/bg-pattern-desktop.svg) no-repeat center ;
background-size: cover;
width: 60%;
height: auto;
}
.text-area{
position: relative;
max-height: 1080px;
height: 100%;
}
.logo-desktop{
width: 20%;
position: absolute;
left: 20%;
top: 5%;
}
.main{
margin: 0;
padding: 0;
text-align: left;
width: 50%;
position: relative;
left: 20%;
top: 25%;
}
.main h1{
margin: 5% auto;
padding: 0;
font-size: 5em;
}
.main p{
line-height: 1.5em;
word-spacing: 3px;
}
.email-form{
margin: 0;
text-align: left;
position: absolute;
left: 19%;
bottom: 10%;
width: 60%;
height: 60px;
}
.email{
width: 70%;
height: 100%;
}
.btn{
position: absolute;
width: 110px;
height: 100%;
}
footer{
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="css/style.css">
<title>Frontend Mentor | Base Apparel coming soon page</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&display=swap" rel="stylesheet">
<!-- Feel free to remove these styles or customise in your own stylesheet ? -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header>
<img class ="logo" src="images/logo.svg" alt="Base Apparel logo">
</header>
<div class="container">
<div class="hero">
<img class="hero-mobile" src="images/hero-mobile.jpg" alt="Base Apparel model">
</div>
<div class="left">
<div class="text-area">
<img class ="logo-desktop" src="images/logo.svg" alt="Base Apparel logo">
<section class="main">
<h1> We're <br> <span class="soon">
coming <br>
soon </span> </h1>
<p>Hello fellow shoppers! We're currently building our new fashion store.
Add your email below to stay up-to-date with announcements and our launch deals.</p>
</section>
<form class="email-form">
<input class="email" id="email"type="email" placeholder="Email Address" required>
<button class="btn" id="submit" type="submit">
<img src="images/icon-arrow.svg" alt="arrow icon">
</button>
</form>
<footer>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Ken Yasuge</a>.
</p>
</footer>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
首先将页脚放在容器下面：
<div class="container">
...
</div>
<footer>
...
</footer>
然后为body添加样式：
body {
background: hsl(0, 100%, 98%);
min-height: 100%;
position: absolute;
}
并为页脚添加样式：
footer {
position: inherit;
bottom: 0;
width: 100%;
}
答案 1 :(得分：0)
在CSS文件中，您编写了针对BIG SCREEN的媒体查询。在该媒体查询中搜索文本区域类。并将高度更改为100％-
.text-area {
position: relative;
max-height: 1080px;
height: calc(100vh - 21px);
}
请尝试这些。会工作
答案 2 :(得分：-1)
请使用Chrome DevTools并检查您的文本区域div，您会注意到文本区域div不在顶部。而且问题出在主类中，您的h1的最高边际利润为5％。
您可以
.main h1 { margin: 0; padding: 5% 0 } .main h1 { margin-top: 0 }的边距之后将margin-top设置为0