Stopka w HTML i CSS

Question

Jak dodać stopke w HTML i CSS jeśli nie mam zapełnionego całego ekranu divami?

Pomóżcie. PLS

Comments

A musi być cały zapełniony? Jeżeli chodzi ci o stopkę przylegającą na stałe do dolnej krawędzi ekrany, zapoznaj się z własnością position ze szczególnym uwzględnieniem wartości sticky.

Najlepiej, jakbyś pokazał swój kod (wstawił w odpowiedni bloczek).

Answer 1

Jest kilka sposobów: https://css-tricks.com/couple-takes-sticky-footer/

IMO najsensowniejszy jest ten z gridem, względnie flexboksem.

Answer 2

Proponuję użyć fixed dla position dla stopki.

 

<section>
	<div class="header">Nagłówek</div>
	<img src="https://picsum.photos/800/800?image=110" alt="Landscape" />
</section>

<section class="margin-300">
	<p>Nie zapełniony ekran</p>
</section>

<footer>
	Fixed footer
</footer>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

section {
	position: relative;
	background-color: white;
	min-height: 100vh;
	padding: 100px;
	position: relative;
	width: 100%;
	z-index: 5;
}
section img {
	position: absolute;
	top: 0;
	left: 0;
	height: 30%;
	width: 100%;
	object-fit: cover;	
}
.header {
	position: absolute;
	top: 15%;
	left: 50%;
  transform: translate(-50%,-50%);
	font-size: 5em;
	color: yellow;
	padding: 0.25em;
	background-color: rgba(0,0,0,0.6);
	z-index: 10;
}
.margin-300 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 300px;
	font-size: 5em;
	color: orange;
}
footer {
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: darkslategray;	
	background-color: slategray;	
	font-size: 5em;
	height: 300px;
	width: 100%;
	z-index: 1;
}