-4
完成我的html项目时，我有一个非常困难的问题。问题是我的html页面底部有一个空白区域。我试图以任何方式删除它，但当我尝试它时，其他元素将是混乱的。有没有人可以帮我在保留其他元素的同时去掉空白处？HTML页面底部的空白空间
这里是我的代码：-50根据您的需要
/* CSS Reset */
* {
\t margin: 0;
\t padding: 0;
}
a {
\t text-decoration: none;
\t color: black;
}
img {
\t max-width: 100%;
\t height: auto;
}
ul, ol {
\t list-style: none;
}
h1, h2, h3 {
\t font-family: roboto light;
}
p {
\t font-family: open sans;
}
::-webkit-scrollbar {
\t width: 17px;
\t height: 10px;
}
::-webkit-scrollbar-track {
\t background-color: rgba(0,0,0.1);
\t border-radius: 2px;
}
::-webkit-scrollbar-thumb {
\t border-radius: 2px;
\t background-color: #3498db;
\t transition: all .4 linear;
}
::-webkit-scrollbar-thumb:hover {
\t background-color: #2980b9;
}
.container4 {
\t width: 100%;
\t height: 600px;
\t padding-bottom: -1000px;
}
.header4 {
\t text-align: center;
\t padding-top: 80px;
\t color: #424242; \t
}
/* Flipper */
/* entire container, keeps perspective */
.flip-container {
\t position: relative;
\t top: 20px;
\t left: 50px;
\t perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
\t transform: rotateY(180deg);
}
.flip-container, .front, .back {
\t width: 200px;
\t height: 200px;
}
/* flip speed goes here */
.flipper {
\t transition: 0.6s;
\t transform-style: preserve-3d;
\t position: relative;
}
/* hide back of pane during swap */
.front, .back {
\t backface-visibility: hidden;
\t position: absolute;
\t top: 0;
\t left: 0;
}
/* front pane, placed above back */
.front {
\t z-index: 2;
\t /* for firefox 31 */
\t transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
\t transform: rotateY(180deg);
}
/* End Flipper */
.tim1 {
\t width: 300px;
\t height: 480px;
\t background-color: #EEEEEE;
\t margin-left: 25px;
\t border: 4px solid #FAFAFA;
\t text-align: center;
\t transition: all .4s ease-in-out;
}
.tim1:hover {
\t border: 4px solid #ecf0f1;
\t background-color: #E0E0E0;
}
.tim2 {
\t width: 300px;
\t height: 480px;
\t background-color: #EEEEEE;
\t position: relative;
\t top: -489px;
\t left: 355px;
\t border: 4px solid #FAFAFA;
\t text-align: center;
\t transition: all .4s ease-in-out;
}
.tim2:hover {
\t border: 4px solid #ecf0f1;
\t background-color: #E0E0E0;
}
.tim3 {
\t width: 300px;
\t height: 480px;
\t background-color: #EEEEEE;
\t position: relative;
\t top: -978px;
\t left: 685px;
\t border: 4px solid #FAFAFA;
\t text-align: center;
\t transition: all .4s ease-in-out;
}
.tim3:hover {
\t border: 4px solid #ecf0f1;
\t background-color: #E0E0E0;
}
.tim4 {
\t width: 300px;
\t height: 480px;
\t background-color: #EEEEEE;
\t position: relative;
\t top: -1468px;
\t left: 1015px;
\t border: 4px solid #FAFAFA;
\t text-align: center;
\t transition: all .4s ease-in-out;
}
.tim4:hover {
\t border: 4px solid #ecf0f1;
\t background-color: #E0E0E0;
}
@-webkit-keyframes efekgambar {
\t 0% {
\t -webkit-filter: contrast(400%) grayscale(0%);
\t }
\t 100% {
\t -webkit-filter: contrast(100%) grayscale(100%);
\t }
}
@-webkit-keyframes terang {
\t 0% {
\t \t -webkit-filter: brightness(100%);
\t }
\t 100% {
\t \t -webkit-filter: brightness(125%);
\t }
}
.orang1, .orang2, .orang3, .orang4 {
\t animation-name: terang;
\t animation-duration: 1s;
\t animation-direction: alternate;
\t animation-iteration-count: infinite;
\t position: relative;
\t width: 200px;
\t height: 200px;
\t border-radius: 50%;
\t border: 4px solid #ecf0f1;
}
.orang1back, .orang2back, .orang3back, .orang4back {
\t position: relative;
\t width: 200px;
\t height: 200px;
\t border-radius: 50%;
\t border: 4px solid #ecf0f1;
\t animation-name: efekgambar;
\t animation-direction: alternate;
\t animation-duration: 2s;
\t animation-iteration-count: infinite;
}
.orang1:hover, .orang1back:hover, .orang2:hover, .orang2back:hover,
.orang3:hover, .orang3back:hover, .orang4:hover, .orang4back:hover {
\t border: 4px solid #EEEEEE;
}
.sosial-media ul {
\t display: flex;
\t float: left;
\t position: relative;
\t top: 30px;
\t left: 70px;
}
.sosial-media ul li {
\t list-style: none;
}
.sosial-media ul li a {
\t width: 30px;
\t height: 30px;
\t text-align: center;
\t line-height: 30px;
\t margin: 0 2px;
\t display: block;
\t border-radius: 50%;
\t position: relative;
\t overflow: hidden;
\t border: 4px solid #FAFAFA;
\t z-index: 1;
}
.fb {
\t background: #507cd3;
}
.tw {
\t background: #7fc9ff;
}
.gp {
\t background: #ff6251;
}
.ig {
\t background: #ff5b79;
}
.sosial-media ul li a .fa {
\t position: relative;
\t color: #FAFAFA;
\t transition: .5s;
\t z-index: 3;
}
.sosial-media ul li a:hover .fa {
\t transform: rotateY(360deg);
}
.sosial-media ul li a:before {
\t content: '';
\t position: absolute;
\t top: 100%;
\t left: 0;
\t width: 100%;
\t height: 100%;
\t background: #f00;
\t transition: .5s;
\t z-index: 2;
}
.sosial-media ul li a:hover:before {
\t top: 0;
}
.sosial-media ul li:nth-child(1) a:before {
\t background: #3b5999;
}
.sosial-media ul li:nth-child(2) a:before {
\t background: #55acee;
}
.sosial-media ul li:nth-child(3) a:before {
\t background: #dd4b39;
}
.sosial-media ul li:nth-child(4) a:before {
\t background: #e4405f;
}
/* End Container4 */
/* Container5 */
.container5 {
\t width: 100%;
\t height: 450px;
\t position: relative;
\t top: -1400px;
\t margin-top: 30px;
\t background-image: url('1.png');
\t background-attachment: fixed;
\t background-repeat: no-repeat;
\t background-size: cover;
\t background-position: center;
}
.header5 {
\t color: #000;
\t position: absolute;
\t top: 30px;
\t left: 100px;
\t text-align: center;
\t padding-top: 40px;
}
.progress {
\t position: absolute;
\t top: 125px;
\t left: 800px;
\t width: 450px;
\t height: 100%;
\t color: #FAFAFA;
}
.bar {
\t height: 20px;
\t background: #FAFAFA;
\t color: #FAFAFA;
\t text-align: right;
\t width: 100%;
\t margin-bottom: 20px;
\t font-size: 10pt;
\t font-weight: bold;
}
.level {
\t height: 20px;
width: 80%;
}
@-webkit-keyframes eighty {
\t 0% {
\t width: 0px;
\t }
\t 100% {
\t width: 80%;
\t }
}
.eighty.start {
\t width: 0px;
\t background: #2EA2DB;
\t animation: eighty 2s ease-out forwards;
\t -webkit-animation: eighty 2s ease-out forwards;
}
@-webkit-keyframes eightyfive {
\t 0% {
\t width: 0px;
\t }
\t 100% {
\t width: 85%;
\t }
}
.eightyfive.start {
\t width: 0px;
\t background: #2EA2DB;
\t animation: eightyfive 2s ease-out forwards;
\t -webkit-animation: eightyfive 2s ease-out forwards;
}
@-webkit-keyframes seventy {
\t 0% {
\t width: 0px;
\t }
\t 100% {
\t width: 80%;
\t }
}
.seventy.start {
\t width: 0px;
\t background: #2EA2DB;
\t animation: seventy 2s ease-out forwards;
\t -webkit-animation: seventy 2s ease-out forwards;
}
@-webkit-keyframes ninety {
\t 0% {
\t width: 0px;
\t }
\t 100% {
\t width: 90%;
\t }
}
.ninety.start {
\t width: 0px;
\t background: #2EA2DB;
\t animation: ninety 2s ease-out forwards;
\t -webkit-animation: ninety 2s ease-out forwards;
}
/* End Container5 */
.container6 {
\t width: 100%;
\t height: 800px;
\t background-color: maroon;
}<!-- Container4 -->
\t \t <div class="container4">
\t \t \t <a id="tim"></a>
\t \t \t <div class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="300ms">
\t \t \t \t <h1 class="header4">Tim</h1>
\t \t \t \t <hr width="80px" color="#F16051" style="position: absolute; left: 635px;">
\t \t \t \t <p align="center" style="margin-top: 10px; margin-bottom: 10px;"><font color="#212121">Dibawah ini adalah para ahli yang siap melayani Anda.</font></p>
\t \t \t </div>
\t \t \t \t <div class="tim1 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
\t \t \t \t \t <div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
\t \t \t \t \t \t <div class="flipper">
\t \t \t \t \t \t \t <div class="front">
\t \t \t \t \t \t \t \t <img class="orang1" src="orang1.jpg">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="back">
\t \t \t \t \t \t \t \t <img class="orang1back" src="orang1.jpg">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <h3 style="margin-top: 40px;"><font color="#424242">Muhammad Anas</font></h3>
\t \t \t \t \t <p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">CEO & Founder</font></i></p>
\t \t \t \t \t <hr width="110px" height="2px" color="#424242" style="position: relative; top: 10px; left: 95px;">
\t \t \t \t \t <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>
\t \t \t \t \t <div class="sosial-media">
\t \t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t \t <li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="tim2 wow slideInLeft" data-wow-duration="1000ms" data-wow-delay="300ms">
\t \t \t \t \t <div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
\t \t \t \t \t \t <div class="flipper">
\t \t \t \t \t \t \t <div class="front">
\t \t \t \t \t \t \t \t <img class="orang2" src="orang1.jpg">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="back">
\t \t \t \t \t \t \t \t <img class="orang2back" src="orang1.jpg">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <h3 style="margin-top: 40px;"><font color="#424242">Vickri Style</font></h3>
\t \t \t \t \t <p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Desainer</font></i></p>
\t \t \t \t \t <hr width="70px" height="2px" color="#424242" style="position: relative; top: 10px; left: 113px;">
\t \t \t \t \t <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>
\t \t \t \t \t <div class="sosial-media">
\t \t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t \t <li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="tim3 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
\t \t \t \t \t <div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
\t \t \t \t \t \t <div class="flipper">
\t \t \t \t \t \t \t <div class="front">
\t \t \t \t \t \t \t \t <img class="orang1" src="orang1.jpg">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="back">
\t \t \t \t \t \t \t \t <img class="orang1back" src="orang1.jpg">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <h3 style="margin-top: 40px;"><font color="#424242">Adhitya Mahendra</font></h3>
\t \t \t \t \t <p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Penulis</font></i></p>
\t \t \t \t \t <hr width="60px" height="2px" color="#424242" style="position: relative; top: 10px; left: 118px;">
\t \t \t \t \t <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>
\t \t \t \t \t <div class="sosial-media">
\t \t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t \t <li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="tim4 wow slideInRight" data-wow-duration="1000ms" data-wow-delay="300ms">
\t \t \t \t \t <div class="wow rotateIn flip-container" ontouchstart="this.classList.toggle('hover');">
\t \t \t \t \t \t <div class="flipper">
\t \t \t \t \t \t \t <div class="front">
\t \t \t \t \t \t \t \t <img class="orang1" src="orang1.jpg">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="back">
\t \t \t \t \t \t \t \t <img class="orang1back" src="orang1.jpg">
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <h3 style="margin-top: 40px;"><font color="#424242">Muhammad Andhika Ramadhan</font></h3>
\t \t \t \t \t <p style="position: relative; top: 10px;"><i><font face="roboto" color="#212121">Social Marketing</font></i></p>
\t \t \t \t \t <hr width="120px" height="2px" color="#424242" style="position: relative; top: 10px; left: 90px;">
\t \t \t \t \t <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>
\t \t \t \t \t <div class="sosial-media">
\t \t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t \t <li class="facebook"><a href="#" class="fb"><i class="fa fa-facebook"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="twitter"><a href="#" class="tw"><i class="fa fa-twitter"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="google-plus"><a href="#" class="gp"><i class="fa fa-google-plus"></i></a></li>
\t \t \t \t \t \t \t \t \t <li class="instagram"><a href="#" class="ig"><i class="fa fa-instagram"></i></a></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t </div>
\t <!-- End Container4 -->
\t <!-- Container5 -->
\t \t <div class="container5">
\t \t \t <div class="wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
\t \t \t \t <h1 class="header5">Skill Kami</h1>
\t \t \t \t <hr width="140px" color="#2EA2DB" style="position: relative; top: 110px; left: 100px;">
\t \t \t \t \t <p style="color: #FAFAFA; position: absolute; top: 130px; left: 100px; margin-right: 700px;">
\t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t \t <p style="color: #FAFAFA; position: absolute; top: 280px; left: 100px; margin-right: 700px;">
\t \t \t \t \t \t Dengan skill yang sudah lebih dari standar, dapat dijamin bahwa layanan yang tim Jasa Pembuatan Blog Anas akan memenuhi segala keinginan Anda.
\t \t \t \t \t </p>
\t \t \t </div>
\t \t \t <div class="progress wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
\t \t \t \t <p>UX dan UI</p>
\t \t \t \t <div class="bar">
\t \t \t \t \t <div class="level eighty">
\t \t \t \t \t \t <p style="padding-right: 20px;">80%</p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <p>Web Desain</p>
\t \t \t \t <div class="bar">
\t \t \t \t \t <div class="level eightyfive">
\t \t \t \t \t \t <p style="padding-right: 20px;">85%</p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <p>Web Programming</p>
\t \t \t \t <div class="bar">
\t \t \t \t \t <div class="level seventy">
\t \t \t \t \t \t <p style="padding-right: 20px;">70%</p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <p>Search Engine Optimization</p>
\t \t \t \t <div class="bar">
\t \t \t \t \t <div class="level ninety">
\t \t \t \t \t \t <p style="padding-right: 20px;">90%</p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t <!-- End Container5 -->对不起，我英文不好
请在这里发布您的代码。没有人想要打开链接 – granmirupa
欢迎来到SO。请在这里发布相关的努力和代码。 YOu可以使用''''''代码片段编辑器创建片段 - 当你这样做时，请点击TIDY，然后保存 – mplungjan
感谢您的纠正，我在这里是新的：D –