在完成我的html项目时，我遇到了一个非常棘手的问题。问题是我的html页面底部有一个空白区域。我试图以任何方式删除它，但是当我尝试它时，另一个元素将是凌乱的。是否有人可以帮助我删除空白区域，同时保留其他元素？
这是我的代码：
/* CSS Reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
img {
max-width: 100%;
height: auto;
}
ul, ol {
list-style: none;
}
h1, h2, h3 {
font-family: roboto light;
}
p {
font-family: open sans;
}
::-webkit-scrollbar {
width: 17px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: rgba(0,0,0.1);
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #3498db;
transition: all .4 linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #2980b9;
}
.container4 {
width: 100%;
height: 600px;
padding-bottom: -1000px;
}
.header4 {
text-align: center;
padding-top: 80px;
color: #424242;
}
/* Flipper */
/* entire container, keeps perspective */
.flip-container {
position: relative;
top: 20px;
left: 50px;
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/* End Flipper */
.tim1 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
margin-left: 25px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim1:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim2 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -489px;
left: 355px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim2:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim3 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -978px;
left: 685px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim3:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
.tim4 {
width: 300px;
height: 480px;
background-color: #EEEEEE;
position: relative;
top: -1468px;
left: 1015px;
border: 4px solid #FAFAFA;
text-align: center;
transition: all .4s ease-in-out;
}
.tim4:hover {
border: 4px solid #ecf0f1;
background-color: #E0E0E0;
}
@-webkit-keyframes efekgambar {
0% {
-webkit-filter: contrast(400%) grayscale(0%);
}
100% {
-webkit-filter: contrast(100%) grayscale(100%);
}
}
@-webkit-keyframes terang {
0% {
-webkit-filter: brightness(100%);
}
100% {
-webkit-filter: brightness(125%);
}
}
.orang1, .orang2, .orang3, .orang4 {
animation-name: terang;
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #ecf0f1;
}
.orang1back, .orang2back, .orang3back, .orang4back {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid #ecf0f1;
animation-name: efekgambar;
animation-direction: alternate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.orang1:hover, .orang1back:hover, .orang2:hover, .orang2back:hover,
.orang3:hover, .orang3back:hover, .orang4:hover, .orang4back:hover {
border: 4px solid #EEEEEE;
}
.sosial-media ul {
display: flex;
float: left;
position: relative;
top: 30px;
left: 70px;
}
.sosial-media ul li {
list-style: none;
}
.sosial-media ul li a {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
margin: 0 2px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 4px solid #FAFAFA;
z-index: 1;
}
.fb {
background: #507cd3;
}
.tw {
background: #7fc9ff;
}
.gp {
background: #ff6251;
}
.ig {
background: #ff5b79;
}
.sosial-media ul li a .fa {
position: relative;
color: #FAFAFA;
transition: .5s;
z-index: 3;
}
.sosial-media ul li a:hover .fa {
transform: rotateY(360deg);
}
.sosial-media ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
.sosial-media ul li a:hover:before {
top: 0;
}
.sosial-media ul li:nth-child(1) a:before {
background: #3b5999;
}
.sosial-media ul li:nth-child(2) a:before {
background: #55acee;
}
.sosial-media ul li:nth-child(3) a:before {
background: #dd4b39;
}
.sosial-media ul li:nth-child(4) a:before {
background: #e4405f;
}
/* End Container4 */
/* Container5 */
.container5 {
width: 100%;
height: 450px;
position: relative;
top: -1400px;
margin-top: 30px;
background-image: url('1.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.header5 {
color: #000;
position: absolute;
top: 30px;
left: 100px;
text-align: center;
padding-top: 40px;
}
.progress {
position: absolute;
top: 125px;
left: 800px;
width: 450px;
height: 100%;
color: #FAFAFA;
}
.bar {
height: 20px;
background: #FAFAFA;
color: #FAFAFA;
text-align: right;
width: 100%;
margin-bottom: 20px;
font-size: 10pt;
font-weight: bold;
}
.level {
height: 20px;
width: 80%;
}
@-webkit-keyframes eighty {
0% {
width: 0px;
}
100% {
width: 80%;
}
}
.eighty.start {
width: 0px;
background: #2EA2DB;
animation: eighty 2s ease-out forwards;
-webkit-animation: eighty 2s ease-out forwards;
}
@-webkit-keyframes eightyfive {
0% {
width: 0px;
}
100% {
width: 85%;
}
}
.eightyfive.start {
width: 0px;
background: #2EA2DB;
animation: eightyfive 2s ease-out forwards;
-webkit-animation: eightyfive 2s ease-out forwards;
}
@-webkit-keyframes seventy {
0% {
width: 0px;
}
100% {
width: 80%;
}
}
.seventy.start {
width: 0px;
background: #2EA2DB;
animation: seventy 2s ease-out forwards;
-webkit-animation: seventy 2s ease-out forwards;
}
@-webkit-keyframes ninety {
0% {
width: 0px;
}
100% {
width: 90%;
}
}
.ninety.start {
width: 0px;
background: #2EA2DB;
animation: ninety 2s ease-out forwards;
-webkit-animation: ninety 2s ease-out forwards;
}
/* End Container5 */
.container6 {
width: 100%;
height: 800px;
background-color: maroon;
}<!-- Container4 -->
<div class="container4">
<a id="tim"></a>
<div class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
<h1 class="header4">Tim</h1>
<hr width="80px" color="#F16051" style="position: absolute; left: 635px;">
<p align="center" style="margin-top: 10px; margin-bottom: 10px;"><font color="#212121">Dibawah ini adalah para ahli yang siap melayani Anda.</font></p>
</div>
<div class="tim1 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Muhammad Anas</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">CEO & Founder</font></i></p>
<hr width="110px" height="2px" color="#424242" style="position: relative; top: 10px; left: 95px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Penemu sekaligus <i>Leader</i> Jasa Pembuatan Blog Anas. Salah satu Blogger Indonesia dan sangat gemar menulis artikel.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
<li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li>
<li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="tim2 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang2" src="orang1.jpg">
</div>
<div class="back">
<img class="orang2back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Vickri Style</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Desainer</font></i></p>
<hr width="70px" height="2px" color="#424242" style="position: relative; top: 10px; left: 113px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Seorang desainer amatir yang mempunyai kemampuan hebat. Gemar mendekatkan diri dengan alam.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
<li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li>
<li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="tim3 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Adhitya Mahendra</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Penulis</font></i></p>
<hr width="60px" height="2px" color="#424242" style="position: relative; top: 10px; left: 118px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Penulis artikel untuk Jasa Pembuatan Blog Anas. Paling tahu dan paling update seputar dunia teknologi.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
<li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li>
<li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="tim4 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
<div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img class="orang1" src="orang1.jpg">
</div>
<div class="back">
<img class="orang1back" src="orang1.jpg">
</div>
</div>
</div>
<h3 style="margin-top: 40px;"><font color="#424242">Muhammad Andhika Ramadhan</font></h3>
<p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Social Marketing</font></i></p>
<hr width="120px" height="2px" color="#424242" style="position: relative; top: 10px; left: 90px;">
<p style="padding: 8px 16px; position: relative; top: 20px"><font size="3pt">Ahli dalam berbicara dan orang yang mempromosikan Jasa Pembuatan Blog Anas. Sangat gemar bermain game.</p>
<div class="sosial-media">
<ul>
<li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
<li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li>
<li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<!-- End Container4 -->
<!-- Container5 -->
<div class="container5">
<div class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<h1 class="header5">Skill Kami</h1>
<hr width="140px" color="#2EA2DB" style="position: relative; top: 110px; left: 100px;">
<p style="color: #FAFAFA; position: absolute; top: 130px; left: 100px; margin-right: 700px;">
Tim Jasa Pembuatan Blog Anas terdiri dari 4 ahli professional yang sudah sangat berpengalaman dalam bidang mereka masing-masing. Ketika 4 professional tersebut bersatu maka akan tercipta sebuah pernyataan yang bisa menyimpulkan skill yang dimiliki oleh Jasa Pembuatan Blog Anas. Dan disebelah kanan adalah skill yang kami miliki hingga saat ini dan akan terus berkembang.
</p>
<p style="color: #FAFAFA; position: absolute; top: 280px; left: 100px; margin-right: 700px;">
Dengan skill yang sudah lebih dari standar, dapat dijamin bahwa layanan yang tim Jasa Pembuatan Blog Anas akan memenuhi segala keinginan Anda.
</p>
</div>
<div class="progress wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
<p>UX dan UI</p>
<div class="bar">
<div class="level eighty">
<p style="padding-right: 20px;">80%</p>
</div>
</div>
<p>Web Desain</p>
<div class="bar">
<div class="level eightyfive">
<p style="padding-right: 20px;">85%</p>
</div>
</div>
<p>Web Programming</p>
<div class="bar">
<div class="level seventy">
<p style="padding-right: 20px;">70%</p>
</div>
</div>
<p>Search Engine Optimization</p>
<div class="bar">
<div class="level ninety">
<p style="padding-right: 20px;">90%</p>
</div>
</div>
</div>
</div>
<!-- End Container5 -->
抱歉我的英文不好
答案 0 :(得分：0)
html，body标签中没有边距。尝试将带有'*'的css行更改为html，body并使其填充ang margin 0。
html, body { margin: 0; padding: 0; }