OscarCy
Reputation: 55
Fixed sticky footer even on page resize
I am trying to make add a sticky footer on the default Carousel Bootstrap 5 example. The issue is when the content of a page is limited, the footer becomes way to big. Also, when the windows is resized the footer also changes accordignly.
I've tried several solutions prosposed here but nothing really worked.
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
/* rtl:remove */
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
/* Login form Styling
-------------------------------------------------- */
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer {
position: relative;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 1rem;
background-color: #f8f9fa;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
color: black;
text-align: center;
font-size: large;
display: flex;
flex-direction: column;
justify-content: center;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>About Us</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Carousel CSS -->
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item"><a href="index.php" class="nav-link px-2 text-white">HOME</a></li>
<li class="nav-item"><a href="car-listing.php" class="nav-link px-2 text-white">CAR LISTING</a></li>
<li class="nav-item"><a href="about-us.php" class="nav-link px-2 text-secondary">ABOUT US</a></li>
<li class="nav-item"><a href="contactus.php" class="nav-link px-2 text-white">CONTCAT US</a></li>
</ul>
<div class="text-end">
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'login.php'; " class="btn btn-outline-light me-2">Login</button>
<?php } ?>
<?php if(isLoggedIn($_SESSION['UserID'])) {
$FullName = getUserFullName($_SESSION['UserID']);?>
<button type="button" class="btn btn-outline-light me-2 dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo htmlentities($FullName); ?> </button>
<?php } ?>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="myaccount.php">My Account</a></li>
<li><a class="dropdown-item" href="mybookings.php">My Bookings</a></li>
<?php if(isAdmin($_SESSION['UserID'])){ ?>
<li><a class="dropdown-item" href="admin/index.php">Admin Panel</a></li>
<?php } ?>
</ul>
<?php if(isLoggedIn($_SESSION['UserID'])) {?>
<button type="button" onclick="location.href = 'index.php?logout=true';" class="btn btn-warning">Logout</button>
<?php } ?>
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'register.php';" class="btn btn-warning">Sign-up</button>
<?php } ?>
</div>
</div>
</div>
</header>
</head>
<body>
<main>
<section class="py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="row gx-4 gx-lg-5 align-items-center">
<div class="col-md-6">
<h4 class="text-center w-responsive mx-auto"> About Us</h4>
<br>
<!--Section description-->
<p class="w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet mi pretium, ullamcorper nisi eu, mattis sem. Ut id enim varius, tempor sapien eu, mattis tellus. Etiam facilisis ex id ex commodo, vitae pharetra enim aliquam. Maecenas
dictum urna vel nisi porttitor, eget sollicitudin sem auctor. Curabitur suscipit feugiat dolor eget bibendum. Maecenas ac iaculis quam. Phasellus eget efficitur neque, et malesuada nunc. Aenean sed rhoncus sem. Mauris eget elit risus. Nam
tristique sollicitudin felis, ac ultrices tortor. Suspendisse eget neque eget purus consequat scelerisque. Vivamus mattis nulla vel vulputate ultrices. Aliquam interdum gravida leo. Pellentesque auctor justo augue, vel tempor nisl venenatis
vitae. Maecenas tincidunt urna in efficitur ullamcorper. Sed lacinia nisi nisl.</p>
</div>
<div class="col-md-6">
<img src="media/logo.png" style="width: 400px; height: 250px;" class="img-fluid float-right" alt="Logo">
</div>
</div>
</div>
</section>
</main>
<hr/>
<!-- FOOTER -->
<footer class="footer">
Copyright © Rent-R-Us <script>document.write(new Date().getFullYear())</script>
</footer>
</body>
</html>Upvotes: 1
Views: 264
Answers (1)
OscarCy
Reputation: 55
Finally I found the solution from this thread The trick was at the body and then the position tag on the .footer is not required anymore.
main {
flex: 1;
}
body {
color: #5a5a5a;
display: flex;
min-height: 100vh;
flex-direction: column;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* rtl:end:ignore */
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
/* rtl:remove */
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
/* Login form Styling
-------------------------------------------------- */
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 1rem;
background-color: #f8f9fa;
width: 100%;
height: 60px;
color: black;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>About Us</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Carousel CSS -->
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item"><a href="index.php" class="nav-link px-2 text-white">HOME</a></li>
<li class="nav-item"><a href="car-listing.php" class="nav-link px-2 text-white">CAR LISTING</a></li>
<li class="nav-item"><a href="about-us.php" class="nav-link px-2 text-secondary">ABOUT US</a></li>
<li class="nav-item"><a href="contactus.php" class="nav-link px-2 text-white">CONTCAT US</a></li>
</ul>
<div class="text-end">
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'login.php'; " class="btn btn-outline-light me-2">Login</button>
<?php } ?>
<?php if(isLoggedIn($_SESSION['UserID'])) {
$FullName = getUserFullName($_SESSION['UserID']);?>
<button type="button" class="btn btn-outline-light me-2 dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?php echo htmlentities($FullName); ?> </button>
<?php } ?>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="myaccount.php">My Account</a></li>
<li><a class="dropdown-item" href="mybookings.php">My Bookings</a></li>
<?php if(isAdmin($_SESSION['UserID'])){ ?>
<li><a class="dropdown-item" href="admin/index.php">Admin Panel</a></li>
<?php } ?>
</ul>
<?php if(isLoggedIn($_SESSION['UserID'])) {?>
<button type="button" onclick="location.href = 'index.php?logout=true';" class="btn btn-warning">Logout</button>
<?php } ?>
<?php if(!isLoggedIn($_SESSION['UserID'])) { ?>
<button type="button" onclick="location.href = 'register.php';" class="btn btn-warning">Sign-up</button>
<?php } ?>
</div>
</div>
</div>
</header>
</head>
<body>
<main>
<section class="py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="row gx-4 gx-lg-5 align-items-center">
<div class="col-md-6">
<h4 class="text-center w-responsive mx-auto"> About Us</h4>
<br>
<!--Section description-->
<p class="w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet mi pretium, ullamcorper nisi eu, mattis sem. Ut id enim varius, tempor sapien eu, mattis tellus. Etiam facilisis ex id ex commodo, vitae pharetra enim aliquam. Maecenas
dictum urna vel nisi porttitor, eget sollicitudin sem auctor. Curabitur suscipit feugiat dolor eget bibendum. Maecenas ac iaculis quam. Phasellus eget efficitur neque, et malesuada nunc. Aenean sed rhoncus sem. Mauris eget elit risus. Nam
tristique sollicitudin felis, ac ultrices tortor. Suspendisse eget neque eget purus consequat scelerisque. Vivamus mattis nulla vel vulputate ultrices. Aliquam interdum gravida leo. Pellentesque auctor justo augue, vel tempor nisl venenatis
vitae. Maecenas tincidunt urna in efficitur ullamcorper. Sed lacinia nisi nisl.</p>
</div>
<div class="col-md-6">
<img src="media/logo.png" style="width: 400px; height: 250px;" class="img-fluid float-right" alt="Logo">
</div>
</div>
</div>
</section>
</main>
<hr/>
<!-- FOOTER -->
<footer class="footer">
Copyright © Rent-R-Us <script>document.write(new Date().getFullYear())</script>
</footer>
</body>
</html>Upvotes: 1
Related Questions
- HTML, CSS - Sticky footer displays over content on screen resize
- Sticky Footer floating in page when resizing (reasked)
- Sticky footer not sticky on each page
- Sticky Footer Issues
- How to fix a Sticky Footer that works, but after a browser window is resized, the footer overlaps
- Fixed footer gets out of place when resizing browser
- Sticky footer, or rather: content doesn't stretch down to footer
- Sticky footer displaying through content with screen resize
- sticky footer does not stay down when window is resized smaller and than scrolled
- why is the sticky footer overlapping top content on resize