Cara Membuat Fixed Footer Dengan HTML CSS

Fixed Footer dimana content footer pada posisi fixed jadi tidak berubah-ubah pada halamannya, Seperti pada halnya tampilan menu yang dibuat fixed jadi saat halaman di scroll kebawah maka menu akan tetap terlihat dan posisi fixed dibagian atas. Dalam kesempatan kali ini yuuuk kita belajar membuat fixed footer menggunakan html css, bagaimana cara membuatnya mari ikuti langkah-langkah berikut ini:Langkah pertama yang dipersiapakan struktur HTML seperti code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Fix Footer Dengan HTML CSS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="back-image">
		<img src="img/harley.jpg" alt="">
	</div>
	<div class="content">
	<h1>Harley-Davidson Street™</h1>
	<img src="img/type1.jpg" id="kiri">
		<p>Di seluruh dunia, Harley-Davidson menyatukan orang-orang dengan sungguh-sungguh dan penuh semangat.....  </p>
		<img src="img/type2.jpg" id="kanan">
		<p>Pengendara motor Harley-Davidson® berasal dari berbagai latar belakang yang berbeda..... </p>
	</div>
	<div class="footer">
		<h2>Fix Footer</h2>
	</div>
</body>
</html>

Pada file html diatas saya menyisipkan 3 buah gambar yaitu untuk bagian banner dan yang lainnya sebagai isi content dalam artikelnya, jadi pada tag p disesuaikan saja berapa banyak isi paragaf ya.

Baiklah sepertinya ada yang kurang tanpa memberikan style untuk tampilannya berikut CSS nya bisa diperhatikan code dibawah ini:

@import url('https://fonts.googleapis.com/css?family=Cutive+Mono&display=swap');
body{margin:0;padding:0;font-family: 'Cutive Mono', monospace;}
div{
	position: relative;
	width: 100%;
	min-height: 75vh;
	z-index: 10;
	padding: 50px 100px;
	box-sizing: border-box;
	background: #ffffff;
}

.back-image img{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#kiri{
	float: left;
	padding:30px 15px 30px 0;
}

#kanan{
	float: right;

	padding:0 0 5px 5px;
}

.content h1{
	margin:0;
	padding:0;
	font-size: 3.5em;
}

.content p{
	font-size: 1.2em;
	text-align: justify;
}

.footer{
	width: 100%;
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #123;
	color:#ffffff;
	font-size: 5em;
	text-transform: uppercase;
	position: fixed;
	bottom: -250px;
	z-index: 1;
}

.content{
	margin-bottom: 200px;
}

oiya gambar yang dipakai sebagai banner diberikan style position: absolute serta object-fit:cover sehingga gambar dengan lebar sama dengan browser.

Jika sudah selesai mengikuti code diatas ,sekarang buka pada browser masing-masing apakah sudah seperti tampilan berikut ini :

Jadi saat di scroll kebawah maka akan terlihat posisi footer tidak berubah posisi karena sudah diberikan property = position:fixed dan z-index:1 ,footer tersembunyi dibelakang content pada class=content. Berikut mari dilihat penampakannnya seperti apa :

Demikian pembahasan yang bisa saya berikan semoga bermanfaat dan sampai bertemu lagi dengan pembahasan atau tutorial lainya.

Teima kasih

Cara Membuat Fixed Footer Dengan HTML CSS

Kategori