堆栈内存溢出
  简体   繁体   English

如何去除底部的空白

[英]How to remove the white space at the bottom

 原文  2019-10-15 08:53:12  7   3    html/ css

问题描述

I have a problem with this code I am working on.我正在处理的这段代码有问题。 There's a white space at the bottom of the page at 1024px width and higher that I can't get rid of.页面底部有一个宽度为 1024 像素或更高的空白区域，我无法摆脱。

I've tried adding a padding-bottom, checking margins, checking heights, but nothing works.我尝试添加填充底部、检查边距、检查高度，但没有任何效果。 I'm still a beginner so I might've missed something.我还是一个初学者，所以我可能错过了一些东西。 Any help will be appreciated.任何帮助将不胜感激。 Thanks谢谢

Screenshot Screenshot 2截图截图 2

I tried the height: calc(100vh-21px);我试过高度： calc(100vh-21px); and this happened Screenshot 3这发生了截图 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

Firstly put footer under container:首先将页脚放在容器下：

<div class="container">
...
</div>
<footer>
...
</footer>

Then add styles for body:然后为body添加styles：

body {
    background: hsl(0, 100%, 98%);
    min-height: 100%;
    position: absolute;
}

and add style for footer:并为页脚添加样式：

footer {
    position: inherit;
    bottom: 0;
    width: 100%;
}

解决方案2
 0  2019-10-15 09:30:20

Your issue is being caused by the collapsing margin-top of the h1 - it is collapsing outside the text-area div您的问题是由 h1 的边缘顶部折叠引起的 - 它在文本区域 div 之外折叠

Set this to 0 instead of 5% and it will fix your issue:将此设置为 0 而不是 5%，它将解决您的问题：

.main > h1:first-child {
    margin-top:0;
}

More information about collapsing margins有关折叠边距的更多信息

解决方案3
 0  2019-10-15 11:27:13

In your CSS file you have written an media query for BIG SCREEN.在您的 CSS 文件中，您已经为 BIG SCREEN 编写了媒体查询。 In that media query search for text-area class.在该媒体查询中搜索文本区域 class。 And change height 100% to this -并将高度 100% 更改为此 -

.text-area {
    position: relative;
    max-height: 1080px;
    height: calc(100vh - 21px);
}

Please try these.请试试这些。 it will work它会起作用的

解决方案4
 -1 已采纳  2019-10-15 09:37:56

Please use Chrome DevTools and inspect your text-area div, you will notice that the text area div is not starting at the top.请使用 Chrome DevTools 并检查您的文本区域 div，您会注意到文本区域 div 不是从顶部开始的。 And the problem is with a 5% top margin of your h1 inside the main class.问题在于主 class 内的 h1 的上边距为 5%。

You can either你可以

  1. Use padding instead of margin: .main h1 { margin: 0; padding: 5% 0 }使用填充而不是边距： .main h1 { margin: 0; padding: 5% 0 } .main h1 { margin: 0; padding: 5% 0 }
  2. Or set margin-top to 0 after the margin you're already using .main h1 { margin-top: 0 }或者在您已经使用的边距之后将 margin-top 设置为 0 .main h1 { margin-top: 0 }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何删除面板底部的多余空白 - How to remove the extra white space at the bottom of the panels CSS Grid - 底部的空白以及如何删除它 - CSS Grid - White space on the bottom and how to remove it 如何删除网页底部的空白？ - How can I remove the white space at the bottom of my web pages? 如何去除网页底部的空白？ (IE/边缘) - How to remove white space at the bottom of webpage? (IE/Edge) 如何删除网页底部的大空白？ - How to remove the Large White space at the bottom of my webpage? 如何从页脚底部删除空格 - How to remove white-space from the bottom of footer 如何删除空白 - How to remove the white space 如何删除空白 - How to Remove White Space 无法删除页面底部的空白（移动设备） - Cannot remove the white space on the bottom of the page (mobile) 删除h3中顶部和底部的空白 - Remove white space at the top and the bottom in h3
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM