如何去除底部的空白
[英]How to remove the white space at the bottom
問題描述
我正在處理的這段代碼有問題。 頁面底部有一個寬度為 1024 像素或更高的空白區域，我無法擺脫。
我嘗試添加填充底部、檢查邊距、檢查高度，但沒有任何效果。 我還是一個初學者，所以我可能錯過了一些東西。 任何幫助將不勝感激。 謝謝
我試過高度： calc(100vh-21px); 這發生了截圖 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>
3 個解決方案
解決方案1
0 2019-10-15 09:16:22
首先將頁腳放在容器下：
<div class="container">
...
</div>
<footer>
...
</footer>
然后為body添加styles：
body {
background: hsl(0, 100%, 98%);
min-height: 100%;
position: absolute;
}
並為頁腳添加樣式：
footer {
position: inherit;
bottom: 0;
width: 100%;
}
解決方案2
0 2019-10-15 09:30:20
您的問題是由 h1 的邊緣頂部折疊引起的 - 它在文本區域 div 之外折疊
將此設置為 0 而不是 5%，它將解決您的問題：
.main > h1:first-child {
margin-top:0;
}
有關折疊邊距的更多信息
解決方案3
0 2019-10-15 11:27:13
在您的 CSS 文件中，您已經為 BIG SCREEN 編寫了媒體查詢。 在該媒體查詢中搜索文本區域 class。 並將高度 100% 更改為此 -
.text-area {
position: relative;
max-height: 1080px;
height: calc(100vh - 21px);
}
請試試這些。 它會起作用的
解決方案4
-1 已采納 2019-10-15 09:37:56
請使用 Chrome DevTools 並檢查您的文本區域 div，您會注意到文本區域 div 不是從頂部開始的。 問題在於主 class 內的 h1 的上邊距為 5%。
你可以
- 使用填充而不是邊距：
.main h1 { margin: 0; padding: 5% 0 }.main h1 { margin: 0; padding: 5% 0 } - 或者在您已經使用的邊距之后將 margin-top 設置為 0
.main h1 { margin-top: 0 }
如何刪除面板底部的多余空白
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.