html - 标题和主要内容之间的空白
问题描述
我正在为我在 uni 的第一个 Web 开发模块建立一个网站的主页，我遇到了一个问题。由于某种原因，在我的导航栏下方和主要内容部分上方有一个空格。我正在使用 CSS 网格，所以可能是由于某个地方的错误，但不确定。
基本上，我只想要网格中的 1 列和 3 行：页眉 - 我的导航栏将放在哪里，一个主要内容部分将放在其中一些标题和一个页脚。但我似乎有一个介于两者之间的第 4 部分。最初我在页脚下方有这个空白，然后我更改了定位设置以将页脚“粘贴”到底部（不知道我在做什么），现在我认为空白已经被推高了。我希望“主要内容”部分从页眉的底部边框开始，到页脚的顶部边框结束，并向其添加背景图像。提前感谢您的帮助！
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint"
content="width=device-width, initial scale=1">
<link
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@700&display=swap"
rel="stylesheet">
<link href="CSS/styles2.css" rel="stylesheet"
type="text/css">
<title>Uwais Kushi-Mohammed</title>
</head>
<body>
<div class="grid">
<div class="header">
<header>
<h1>U <span
style="color: white;">K
</span></h1>
<nav>
<ul class="nav-links">
<li><a href="">Home</a>
</li>
<li><a href="">Profile</a>
</li>
<li><a href="">Experience
& Education</a>
</li>
<li><a
href="">Interests</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<div class="greeting">
<h1>Hello,</h1>
</div>
<div class="intro">
<h2>My name is <span
style="color: #2ac984;">Uwais
Kushi-Mohammed</span></span>,
<br />a computer science
student based in Sheffield,
England.</h2>
</div>
<div class="tagline">
<h1>This Is <span
style="color: #2ac984;">What
I Do. </span></h1>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-section-about">
<h1 class="logo">U<span
style="color: white;">K
</span></h1>
<p>Welcome to my resume site.
My name is Uwais
Kushi-Mohammed, I am a
first year computer
science student at
Sheffield Hallam
University. If you want to
hire me for a project get
in touch.</p>
</div>
<div class="footer-section-links">
<h1>Quick <span
style="color: white;">Links
</span></h1>
<nav>
<ul>
<li><a
href="">Home</a>
</li>
<li><a
href="">Profile</a>
</li>
<li><a href="">Experience
&
Education</a>
</li>
<li><a
href="">Interests</a>
</li>
</ul>
</nav>
</div>
<div
class="footer-section-contact">
<h1>Contact<span
style="color: white;">
Me</span></h1>
<br />
<form class="contact-form"
action="results.html"
method="GET">
<div>
<input
class="contact-input"
type="text"
id="first-name"
placeholder="First Name...">
</div>
<div>
<input
class="contact-input"
type="text"
id="last-name"
placeholder="Last Name...">
</div>
<div>
<input
class="contact-input"
type="email"
id="email"
placeholder="Email Address...">
</div>
<div>
<textarea
class="message-input"
id="message"
placeholder="Message..."></textarea>
</div>
<button
class="button">Send</button>
</form>
</div>
<div class="footer-bottom">
Copyright 2020 © |
Designed by Uwais
Kushi-Mohammed. All Rights
Reserved.
</div>
</div>
</div>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"header"
"main-content"
"footer";
}
header {
background-color: black;
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center ;
height: 70px;
margin-bottom: 0;
}
header h1 {
color: #2ac984;
font-size: 46px;
font-family: 'Orbitron', sans-serif;
padding-left: 30px;
font-weight: 100;
text-align: center;
text-decoration: none;
list-style: none;
}
.nav-links li , .nav-links li a {
text-decoration: none;
list-style-type: none;
padding: 30px;
font-size: 17px;
color: #e4e6e3;
display: inline-block;
font-family: 'Orbitron', sans-serif;
}
header h1:hover {
color: #2ac984;
margin-bottom: 15px;
}
.nav-links a {
transition: all 0.3s ease 0s;
}
.nav-links a:hover {
color: #2ac984;
}
.main-content{
grid-area: main-content;
background-color: black;
}
.greeting h1{
font-family: 'Anonymous Pro', monospace;
font-size: 30px;
color: #e4e6e3;
position: relative;
padding-left: 15%;
}
.intro h2{
font-family: 'Anonymous Pro', monospace;
font-size: 20px;
color: #787672;
text-align: justify;
position: relative;
padding-left: 15%;
}
.tagline h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 40px;
color: #e4e6e3;
position: relative;
padding-top: 100px;
padding-left: 50%
}
.footer {
grid-area: footer;
background-color: #1c1b1b;
height: 350px;
position: relative;
bottom: 0px;
}
.footer .footer-content{
height: 300px ;
display: flex;
}
.footer .footer-content .footer-section-about, .footer-section-links, .footer-section-contact{
flex: 1;
padding: 25px;
}
.footer .footer-content .footer-section-about .logo {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-about p {
font-family: 'Anonymous Pro', monospace;
margin-top: 3px;
font-size: 15px;
color: #787672;
padding-top: 30px;
text-align: justify;
}
.footer .footer-content .footer-section-links h1 {
font-family: 'Orbitron', sans-serif;
color:#2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-links li, .footer-section-links a{
font-family: 'Anonymous Pro', monospace;
color:#dbdbdb;
text-decoration: none;
list-style-type: none;
margin:3px 0 10px 0;
padding-top: 15px;
transition: all 0.3s;
}
.footer-section-links a:hover {
color: #2ac984;
margin-left: 15px;
transition: all 0.3s;
}
.footer-section-contact h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer-section-contact .contact-form .contact-input {
border: 0;
background-color: #c7c3c3;
width: 160px;
margin: 3px ;
padding: 2px;
line-height: 0.7rem;
}
.footer-section-contact .contact-form .message-input{
border: 0;
background-color: #c7c3c3;
width: 240px;
margin:3px;
height: 75px;
line-height: 0.7rem;
padding: 2px;
}
.button{
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 0;
padding: 5px;
margin-left: 3px;
line-height: 0.7rem;
background-color:#c7c3c3;
}
::placeholder{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer .footer-bottom {
font-family: 'Anonymous Pro', monospace;
color:#787672 ;
font-size: 15px;
font-weight: 50%;
width: 100%;
background-color: #343a40;
text-align: center;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}
合并为一个片段：
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header" "main-content" "footer";
}
header {
background-color: black;
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
margin-bottom: 0;
}
header h1 {
color: #2ac984;
font-size: 46px;
font-family: 'Orbitron', sans-serif;
padding-left: 30px;
font-weight: 100;
text-align: center;
text-decoration: none;
list-style: none;
}
.nav-links li,
.nav-links li a {
text-decoration: none;
list-style-type: none;
padding: 30px;
font-size: 17px;
color: #e4e6e3;
display: inline-block;
font-family: 'Orbitron', sans-serif;
}
header h1:hover {
color: #2ac984;
margin-bottom: 15px;
}
.nav-links a {
transition: all 0.3s ease 0s;
}
.nav-links a:hover {
color: #2ac984;
}
.main-content {
grid-area: main-content;
background-color: black;
}
.greeting h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 30px;
color: #e4e6e3;
position: relative;
padding-left: 15%;
}
.intro h2 {
font-family: 'Anonymous Pro', monospace;
font-size: 20px;
color: #787672;
text-align: justify;
position: relative;
padding-left: 15%;
}
.tagline h1 {
font-family: 'Anonymous Pro', monospace;
font-size: 40px;
color: #e4e6e3;
position: relative;
padding-top: 100px;
padding-left: 50%
}
.footer {
grid-area: footer;
background-color: #1c1b1b;
height: 350px;
position: relative;
bottom: 0px;
}
.footer .footer-content {
height: 300px;
display: flex;
}
.footer .footer-content .footer-section-about,
.footer-section-links,
.footer-section-contact {
flex: 1;
padding: 25px;
}
.footer .footer-content .footer-section-about .logo {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-about p {
font-family: 'Anonymous Pro', monospace;
margin-top: 3px;
font-size: 15px;
color: #787672;
padding-top: 30px;
text-align: justify;
}
.footer .footer-content .footer-section-links h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer .footer-content .footer-section-links li,
.footer-section-links a {
font-family: 'Anonymous Pro', monospace;
color: #dbdbdb;
text-decoration: none;
list-style-type: none;
margin: 3px 0 10px 0;
padding-top: 15px;
transition: all 0.3s;
}
.footer-section-links a:hover {
color: #2ac984;
margin-left: 15px;
transition: all 0.3s;
}
.footer-section-contact h1 {
font-family: 'Orbitron', sans-serif;
color: #2ac984;
padding-left: 0px;
font-weight: 100;
font-size: 25px;
text-align: left;
}
.footer-section-contact .contact-form .contact-input {
border: 0;
background-color: #c7c3c3;
width: 160px;
margin: 3px;
padding: 2px;
line-height: 0.7rem;
}
.footer-section-contact .contact-form .message-input {
border: 0;
background-color: #c7c3c3;
width: 240px;
margin: 3px;
height: 75px;
line-height: 0.7rem;
padding: 2px;
}
.button {
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 0;
padding: 5px;
margin-left: 3px;
line-height: 0.7rem;
background-color: #c7c3c3;
}
::placeholder {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.footer .footer-bottom {
font-family: 'Anonymous Pro', monospace;
color: #787672;
font-size: 15px;
font-weight: 50%;
width: 100%;
background-color: #343a40;
text-align: center;
height: 40px;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial scale=1">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@700&display=swap" rel="stylesheet">
<link href="CSS/styles2.css" rel="stylesheet" type="text/css">
<title>Uwais Kushi-Mohammed</title>
</head>
<body>
<div class="grid">
<div class="header">
<header>
<h1>U <span style="color: white;">K
</span></h1>
<nav>
<ul class="nav-links">
<li><a href="">Home</a>
</li>
<li><a href="">Profile</a>
</li>
<li><a href="">Experience
& Education</a>
</li>
<li><a href="">Interests</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-content">
<div class="greeting">
<h1>Hello,</h1>
</div>
<div class="intro">
<h2>My name is <span style="color: #2ac984;">Uwais
Kushi-Mohammed</span></span>,
<br />a computer science student based in Sheffield, England.
</h2>
</div>
<div class="tagline">
<h1>This Is <span style="color: #2ac984;">What
I Do. </span></h1>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="footer-section-about">
<h1 class="logo">U<span style="color: white;">K
</span></h1>
<p>Welcome to my resume site. My name is Uwais Kushi-Mohammed, I am a first year computer science student at Sheffield Hallam University. If you want to hire me for a project get in touch.</p>
</div>
<div class="footer-section-links">
<h1>Quick <span style="color: white;">Links
</span></h1>
<nav>
<ul>
<li><a href="">Home</a>
</li>
<li><a href="">Profile</a>
</li>
<li><a href="">Experience
&
Education</a>
</li>
<li><a href="">Interests</a>
</li>
</ul>
</nav>
</div>
<div class="footer-section-contact">
<h1>Contact<span style="color: white;">
Me</span></h1>
<br />
<form class="contact-form" action="results.html" method="GET">
<div>
<input class="contact-input" type="text" id="first-name" placeholder="First Name...">
</div>
<div>
<input class="contact-input" type="text" id="last-name" placeholder="Last Name...">
</div>
<div>
<input class="contact-input" type="email" id="email" placeholder="Email Address...">
</div>
<div>
<textarea class="message-input" id="message" placeholder="Message..."></textarea>
</div>
<button class="button">Send</button>
</form>
</div>
<div class="footer-bottom">
Copyright 2020 © | Designed by Uwais Kushi-Mohammed. All Rights Reserved.
</div>
</div>
</div>
</body>
</html>解决方案
似乎是网格模板导致了这个问题。注释掉第 13 行或一起删除该行应该修复它
完成后，您的 .grid css 应如下所示：
.grid {
display: grid;
grid-template-columns: 1fr;
/* grid-template-rows: 1fr 1fr 1fr; */
grid-template-areas:
"header"
"main-content"
"footer";
}
或者您可以一起删除网格模板行。让我知道这是否有帮助！祝你好运！
推荐阅读
- java - 在不为第二个数组分配空间的情况下从已排序的数组中删除重复项
- python - 在第三行显示局部变量 L 已分配但从未使用过
- javascript - 使用 Cloudflare Worker 进行部署的问题
- java - 如果输入是某个数字的倍数，是否有一种有效的方法让程序执行一段代码？
- jdbi - 使用 JDBI 映射 @Json 属性
- android - 什么时候会在 MediaPlayer 中启动 onCompletion？
- javascript - 带有 React 的 Typescript - 通过 LI 元素循环的 TS 错误
- julia - 是否可以为矩阵分解预先分配数组？
- java - 启用 EditText 下划线
- javascript - React.js Material-Table 将选定的行传递到另一个页面