While building an new website I have added an footer, neatly displayed on the bottom of my screen.
But when I have an page with not much content the footer is not displayed on the bottom:
So I would like to display the footer on the bottom, therefore I have added to my CSS:
footer {
position: absolute;
bottom: 0;
width: 100%;
}
Now the footer is on the bottom of my screen, but the background is not stretched.
And when an page has more content it is shown under my footer.
So, clearly my CSS adjusting is not the wat to go. Any suggestions how to do it the right way?
https://torza.nl/rsw2/certificering.php
After the edit suggested by Mehadi Hassan I was able to sort out most of the issues with adding:
body {
display: flex;
flex-direction: column;
height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
But there is still an small error on of the pages, but all div look ok.
https://torza.nl/rsw2/about.php
<?php require_once('includes/header.php'); ?>
<!-- Page Background -->
<div class="bg">
<!-- Page Content -->
<div class="container header">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">Over Rotterdam Steel Works</h1>
<!-- Intro Content -->
<div class="row">
<div class="col-lg-6">
<iframe class="embed-responsive-item" src="img/media/RSW_web.mp4" allowfullscreen width="100%" height="100%"></iframe>
</div>
<div class="col-lg-6">
<p>Rotterdam Steel Works is een staalsnijbedrijf met twee plasma- en twee autogeensnijmachines. Tevens kunnen wij u tegen een concurrerende prijs Laser- en Watersnijden aanbieden. Ons staalsnijbedrijf staat bekend om de snelle levering, goede prijs-kwaliteitverhouding en korte lijnen. We spelen uw opdracht direct door naar onze autocad-tekenaar en schakelen snel met de werkvloer. Zo krijgt u de kwaliteit die u verwacht, binnen de termijn die is afgesproken. Wilt u meer weten over de producten die wij leveren en van Rotterdam Steel Works uw ijzersterke partner maken? Neem dan contact met ons op.</p>
</div>
</div>
<!-- /.row -->
<!-- Team Members -->
<h2 style="padding-top: 30px;">Contactpersonen</h2>
<div class="row">
<div class="col-lg-3 mb-3">
<div class="card h-100 text-center">
<img class="card-img-top" src="img/gerard.png" alt="Gerard de Kaper">
<div class="card-body">
<h4 class="card-title">Gerard de Kaper</h4>
<h6 class="card-subtitle mb-2 text-muted">Eigenaar</h6>
<p class="card-text">Gerard werkt al vanaf 1991 in de snijbranche. Hij is begonnen als tekenaar en hielp mee in de productie. Hierdoor weet hij alles van staalsoorten en hun specifieke eigenschappen.</p>
</div>
<div class="card-footer">
<div class="text-center"><a href="mailto:gerard@rotterdamsteelworks.nl"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Stuur e-mail</button></a></div>
</div>
</div>
</div>
<div class="col-lg-3 mb-3">
<div class="card h-100 text-center">
<img class="card-img-top" src="img/mohamed.png" alt="Mohamed Chahchouhi">
<div class="card-body">
<h4 class="card-title">Mo Chahchouhi</h4>
<h6 class="card-subtitle mb-2 text-muted">Werkvoorbereiding</h6>
<p class="card-text">Mohamed is onze werkvoorbereider en al vanaf 2001 een collega van Gerard. Hij vertaalt uw vraag naar de productie, zodat uw order volgens uw specificaties verzonden wordt.</p>
</div>
<div class="card-footer">
<div class="text-center"><a href="mailto:mo@rotterdamsteelworks.nl"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Stuur e-mail</button></a></div>
</div>
</div>
</div>
<div class="col-lg-3 mb-3">
<div class="card h-100 text-center">
<img class="card-img-top" src="img/battal.png" alt=">Battal Ozturk">
<div class="card-body">
<h4 class="card-title">Battal Ozturk</h4>
<h6 class="card-subtitle mb-2 text-muted">Chef werkplaats</h6>
<p class="card-text">Battal is onze meewerkend voorman. Sinds de start van het bedrijf is hij werkzaam bij RSW. Hij zorgt dat wat u vraagt geleverd wordt, hij is de spil tussen alle afdelingen.</p>
</div>
<div class="card-footer">
<div class="text-center"><a href="mailto:battal@rotterdamsteelworks.nl"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Stuur e-mail</button></a></div>
</div>
</div>
</div>
<div class="col-lg-3 mb-3">
<div class="card h-100 text-center">
<img class="card-img-top" src="img/mark.jpg" alt="Mark Ruiter">
<div class="card-body">
<h4 class="card-title">Mark Ruiter</h4>
<h6 class="card-subtitle mb-2 text-muted">Business developer</h6>
<p class="card-text">Mark draagt al sinds de start van RSW zijn steentje bij. Naast dat de firma geheel draait op zijn ERP pakket heeft hij veel kennis van de markt, door die combinatie is hij als geen ander in staat om de firma voorop te laten lopen met de ontwikkelingen binnen de markt.</p>
</div>
<div class="card-footer">
<div class="text-center"><a href="mailto:mark@rotterdamsteelworks.nl"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Stuur e-mail</button></a></div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.background -->
<?php require_once('includes/footer.php'); ?>
</body>
</html>
