@RazaAbbas62
Posted
To achieve the desired behavior of fixing the footer at the bottom of the page and allowing it to be visible when the content is smaller than the screen height or requiring scrolling when the content is larger, you can use a combination of HTML and CSS. Here's an example:
HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Your Page Title</title>
</head>
<body>
<div class="wrapper">
<!-- Your page content goes here -->
<div class="content">
<!-- Your actual content -->
</div>
</div>
<footer>
<!-- Your footer content goes here -->
</footer>
</body>
</html>
CSS styles (styles.css):
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
footer {
background-color: #f0f0f0;
padding: 10px;
position: sticky;
bottom: 0;
width: 100%;
}
Explanation:
-
The
bodyelement is set todisplay: flexandflex-direction: columnto ensure that the main container (wrapper) takes up the available vertical space. -
The
wrapperdiv is givenflex: 1to take up the remaining space and allow the footer to be pushed to the bottom. -
The
footeris set toposition: stickyandbottom: 0to make it stick to the bottom of the page. It will remain at the bottom even if the content is smaller than the screen height. -
The
min-height: 100vhon thebodyensures that the body takes at least the full height of the viewport.
With this setup, the footer will be fixed at the bottom of the page for small content and will be visible without scrolling. For larger content, you will need to scroll to see the footer. Adjust the styles according to your design preferences.
