-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 –