https://gx0st.com
所以，如果你们检查一下，至少在我的分辨率1920x1080上。它的底部是灰色的，所以不太合身。如果你检查https://gx0st.com/contact.html你会看到同样的情况。如果你们能帮一个小女孩，我会很感激的。我只想让它全黑，合身。
如果你们也有任何关于如何为移动设备优化它的建议，那将是有趣的。任何人我都会调查的。但感谢所有帮助我解决第一个问题的人<3
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="page-wrapper">
<header id="header">
<div class="logo">
</div>
<nav id="nav-bar">
<ul>
<li><a href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA" href="Youtube"><b>Youtube</b></a></li>
<li><a href="https://gx0st.com/contact.html" href="Contact"><b>Contact</b></a></li>
</ul>
</nav>
</header>
<div class="container"></div>
<section id="hero">
<form id="form"
action="mailto:godislove1427@gmail.com">
<input
name="email"
id="email"
type="email"
placeholder="Email Address"
required/>
<input id="submit" type="submit"
value="HQ" class="btn" /></input></form>
</section>
</section>
<section id="how-it-works">
<iframe
id="video"
height="315"
src="https://www.youtube-nocookie.com/embed/mjq6kZSwTmI"
frameborder="0"
allowfullscreen></iframe></section>
<section id="pricing">
<div class="product" id="tenor">
<ul>
</div>
</section>
<footer>
<span>Copyright 2018, Ghost Robles</span>
</footer>
</div>
</div>
</html>
<style>
@font-face {font-family: 'vcr_osd_mono-webfont'; src: url('vcr_osd_mono-webfont.eot'); src: url('vcr_osd_mono-webfont.eot?#iefix') format('embedded-opentype'), url('vcr_osd_mono-webfont.woff2') format('woff2'), url('vcr_osd_mono-webfont.woff') format('woff'), url('vcr_osd_mono-webfont.ttf') format('truetype'), url('webfont.svg#svgFontname') format('svg');}
title {text-align: center;
font-family: "vcr_osd_mono-webfont";}
h2 {text-align: center;
font-family: "vcr_osd_mono-webfont";}
p {text-align: center;
color: purple;
font-family: "vcr_osd_mono-webfont";}
nav {text-align: center;}
body {background-color: rgb(0, 0, 0);
cursor: url(http://cur.cursors-4u.net/toons/too-3/too297.cur), auto;}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page-wrapper {
position: relative;
}
li {
list-style: none;
}
a {
color: rgb(255, 2, 2);
text-decoration: none;
font-size: 35px;
font-family: "vcr_osd_mono-webfont";
}
/** global classes styling **/
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px rgb(255, 0, 0) solid;
border-radius: 2px;
background: transparent;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgb(0, 0, 0);
}
@media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
@media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
@media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
@media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
nav li {
padding-bottom: 5px;
}
}
nav > ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
@media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
#hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 200px;
margin-top: 50px;
}
#hero > h2 {
margin-bottom: 20px;
word-wrap: break-word;
}
#hero input[type="email"] {
max-width: 275px;
width: 100%;
padding: 5px;
}
#hero input[type="submit"] {
max-width: 150px;
width: 100%;
height: 30px;
margin: 15px 0;
border: 0;
background-color: #c300ffea;
}
@media (max-width: 650px) {
#hero {
margin-top: 120px;
}
}
#features {
margin-top: 30px;
}
@media (max-width: 550px) {
#features .icon {
display: none;
}
}
#features .desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;
}
@media (max-width: 550px) {
#features .desc {
width: 100%;
text-align: center;
padding: 0;
height: 150px;
}
}
@media (max-width: 650px) {
#features {
margin-top: 0;
}
}
#how-it-works {
margin-top: 50px;
display: flex;
justify-content: center;
}
#how-it-works > iframe {
max-width: 560px;
width: 100%;
}
#pricing {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.product > .level {
background-color: rgb(0, 0, 0);
color: rgb(0, 0, 0);
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
.product > h2 {
margin-top: 15px;
}
.product > ol {
margin: 15px 0;
}
.product > ol > li {
padding: 5px 0;
}
.product > button:hover {
background-color: rgb(0, 0, 0);
transition: background-color 1s;
}
@media (max-width: 800px) {
#pricing {
flex-direction: column;
}
.product {
max-width: 300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px;
}
}
footer {
margin-top: 30px;
background-color: rgb(0, 0, 0);
padding: 20px;
}
footer > ul {
display: flex;
justify-content: flex-end;
}
footer > ul > li {
padding: 0 10px;
}
footer > span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: rgb(255, 0, 0);
}
::placeholder {text-align: center;}
.btn {color: rgb(255, 255, 255);}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137617043-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137617043-2');
</script>
</html>
**Contact.HTML**
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
<!-- START NAV -->
<nav id="navbar" class="nav">
<ul class="nav-list">
<li>
<a href="index.html">HQ</a>
</li>
</ul>
</nav>
<!-- END NAV -->
<!-- START CONTACT SECTION -->
<body>
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Let's work together!</h2>
</div>
<div class="contact-links">
<a
href="https://www.instagram.com/ghostrobles"
target="_blank"
class="btn contact-details"
><i class="fab fa-instagram"></i> Instagram</a
>
<a
id="profile-link"
href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA"
target="_blank"
class="btn contact-details"
><i class="fab fa-youtube"></i> Youtube</a
>
<a
>
<a href="mailto:godislove1427@gmail.com" class="btn contact-details"
><i class="fas fa-at"></i> Gmail</a
>
</div>
</section>
</body>
<!-- END CONTACT SECTION -->
<!-- START FOOTER SECTION -->
<footer class="site-footer">
<div id="footer-content">
<a href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA"
©Ghost Robles>
<a href="https://www.youtube.com/channel/UCSM3fpzXloGLNL7N6qnjamA" target="_blank"
>©Ghost Robles
</a>
</p>
<!-- END FOOTER SECTION -->
</footer>
<style>
@font-face {font-family: 'vcr_osd_mono-webfont'; src: url('vcr_osd_mono-webfont.eot'); src: url('vcr_osd_mono-webfont.eot?#iefix') format('embedded-opentype'), url('vcr_osd_mono-webfont.woff2') format('woff2'), url('vcr_osd_mono-webfont.woff') format('woff'), url('vcr_osd_mono-webfont.ttf') format('truetype'), url('webfont.svg#svgFontname') format('svg');}
/* Custom properties/variables */
:root {
--main-white: #ff0000;
--main-red: #000000;
--main-blue: #000000;
--main-gray: #000000;
}
/* Base reset */
* {
margin: 0;
padding: 0;
}
/* box-sizing and font sizing */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
/* Set font size for easy rem calculations
* default document font size = 16px, 1rem = 16px, 100% = 16px
* (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
*/
font-size: 62.5%;
scroll-behavior: smooth;
}
/* A few media query to set some font sizes at different screen sizes.
* This helps automate a bit of responsiveness.
* The trick is to use the rem unit for size values, margin and padding.
* Because rem is relative to the document font size
* when we scale up or down the font size on the document
* it will affect all properties using rem units for the values.
*/
/* I am using the em unit for breakpoints
* The calculation is the following
* screen size divided by browser base font size
* As an example: a breakpoint at 980px
* 980px / 16px = 61.25em
*/
/* 1200px / 16px = 75em */
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
html {
font-size: 58%;
}
}
/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
html {
font-size: 55%;
}
}
/* Base styles */
body {
font-family: "vcr_osd_mono-webfont";
font-size: 1.8rem; /* 18px */
font-weight: 400;
line-height: 1.4;
color: rgb(108, 6, 204);
}
h1,
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-align: center;
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 4.2rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: var(--main-white);
}
img {
display: block;
width: 100%;
}
/* nav */
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--main-red);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
z-index: 10;
}
.nav-list {
display: flex;
margin-right: 2rem;
}
@media (max-width: 28.75em) {
.nav {
justify-content: center;
}
.nav-list {
margin: 0 1rem;
}
}
.nav-list a {
display: block;
font-size: 2.2rem;
padding: 2rem;
}
.nav-list a:hover {
background: var(--main-blue);
}
/* Welcome section */
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
.welcome-section > p {
font-size: 3rem;
font-weight: 200;
font-style: italic;
color: var(--main-red);
}
/* Projects section */
.projects-section {
text-align: center;
padding: 10rem 2rem;
background: var(--main-blue);
}
.projects-section-header {
max-width: 640px;
margin: 0 auto 6rem auto;
border-bottom: 0.2rem solid var(--main-white);
}
@media (max-width: 28.75em) {
.projects-section-header {
font-size: 4rem;
}
}
/* "Automagic" image grid using no media queries */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
}
@media (max-width: 30.625em) {
.projects-section {
padding: 6rem 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
}
.project {
background: var(--main-gray);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 2px;
}
.code {
color: var(--main-gray);
transition: color 0.3s ease-out;
}
.project:hover .code {
color: #ff7f50;
}
.project-image {
height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;
}
.project-title {
font-size: 2rem;
padding: 2rem 0.5rem;
}
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 2px;
}
.btn-show-all {
font-size: 2rem;
background: var(--main-gray);
transition: background 0.3s ease-out;
}
.btn-show-all:hover {
background: var(--main-red);
}
.btn-show-all:hover > i {
transform: translateX(2px);
}
.btn-show-all > i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
/* Contact section */
.contact-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 80vh;
padding: 0 2rem;
background: var(--main-gray);
}
.contact-section-header > h2 {
font-size: 6rem;
}
@media (max-width: 28.75em) {
.contact-section-header > h2 {
font-size: 4rem;
}
}
.contact-section-header > p {
font-style: italic;
}
.contact-links {
display: flex;
justify-content: center;
width: 100%;
max-width: 980px;
margin-top: 4rem;
flex-wrap: wrap;
}
.contact-details {
font-size: 2.4rem;
text-shadow: 2px 2px 1px #000000;
transition: transform 0.3s ease-out;
}
.contact-details:hover {
transform: translateY(8px);
}
/* Footer */
footer {
font-weight: 300;
display: default;
justify-content: space-evenly;
padding: 2rem;
background: var(--main-gray);
border-top: 4px solid var(--main-red);
}
footer > p {
margin: 2rem;
}
footer i {
vertical-align: middle;
}
@media (max-width: 28.75em) {
footer {
flex-direction: column;
text-align: center;
}
}
.site-footer {
background: rgb(0, 0, 0);
}
#footer-content {
background: rgb(0, 0, 0);
}
</style>
要使黑色填充整个页面，只需在css中键入：
html, body{
height: 100vh;
}
body{
z-index: -1;
}
并将导航的z索引更改为1。
您可以始终为主体元素提供背景色
body{
background-color: black;
}
这种颜色应该在调整窗口大小以及时保持不变
我认为只要将身体高度设置为100%就可以解决问题。CSS：
html, body{
height: 100%;
background-color: black;
}
原因是您添加的内容和样式没有填充整个屏幕，因此颜色在"最后一个元素"所在的位置结束。
设置CCD_ 1将使元素的高度与屏幕本身的高度相同。避免在身体上设置高度，你的网页可能会增长，这将成为一个问题。