During the process of constructing a new website, I included a footer that is neatly positioned at the bottom of my screen.
However, I noticed that on pages with minimal content, the footer does not remain fixed at the bottom:
In order to ensure that the footer is consistently displayed at the bottom of the screen, I made some adjustments to my CSS:
footer {
position: absolute;
bottom: 0;
width: 100%;
}
Although this adjustment placed the footer at the bottom, it did not stretch the background as desired.
Furthermore, when there is more content on a page, it ends up being displayed below the footer.
It appears that my current CSS modifications are inadequate. Can anyone offer suggestions for addressing this issue correctly?
Following changes recommended by Mehadi Hassan have resolved most issues, with the addition of:
body {
display: flex;
flex-direction: column;
height: 100vh; /* To avoid IE 10-11 `min-height` bug */
}
Despite these improvements, a small error persists on one of the pages, although all div elements appear to be functioning correctly.
<?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">About 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 a steel cutting company equipped with two plasma and two oxyfuel cutting machines. We also offer Laser and Waterjet cutting services at competitive prices. Our reputation is built on fast delivery, good price-quality ratio, and efficient communication. Your orders are promptly passed to our AutoCAD technician for production planning, ensuring timely and high-quality results. For more information on our products and how Rotterdam Steel Works can be your reliable partner, please feel free to contact us.</p>
</div>
</div>
<!-- /.row -->
<!-- Team Members -->
<h2 style="padding-top: 30px;">Contact Persons</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">Owner</h6>
<p class="card-text">Gerard has been working in the cutting industry since 1991. He started as a draughtsman and gained experience in production. His expertise lies in different types of steel and their specific properties.</p>
</div>
<div class="card-footer">
<div class="text-center"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee9ebfceffceacefce1fafaebfceaefe3fdfaebebe2f9e1fce5fda0e0e2">[email protected]</a>"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Send Email</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">Production Planning</h6>
<p class="card-text">Mohamed serves as our production planner and has been Gerard's colleague since 2001. He bridges the gap between your requirements and the production team, ensuring that orders are fulfilled exactly as specified.</p>
</div>
<div class="card-footer">
<div class="text-center"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c61634c7e637878697e686d617f786969607b637e677f226260">[email protected]</a>"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Send Email</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">Workshop Manager</h6>
<p class="card-text">Battal is our hands-on supervisor who has been part of RSW since its inception. He ensures that your requests are fulfilled, serving as the link between all departments within the organization.</p>
</div>
<div class="card-footer">
<div class="text-center"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b797a6f6f7a775b69746f6f7e697f7a76686f7e7e776c74697068357577">[email protected]</a>"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Send Email</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 has played an integral role in RSW's growth since its establishment. Apart from managing the firm's ERP system, he possesses extensive market knowledge, enabling him to lead innovation within the industry.</p>
</div>
<div class="card-footer">
<div class="text-center"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670a06150c2715081313021503060a141302020b1008150c1449090b">[email protected]</a>"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Send Email</button></a></div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.background -->
<?php require_once('includes/footer.php'); ?>
</body>
</html>