Example:
<html>
<head>
<style>
/* Reset some default margin and padding for consistency */
body,
h1,
h2,
p {
margin: 0;
padding: 0;
}
/*Define a flex container for the overall layout */
.wrapper {
min-height: 100vh;
/* Ensure the container takes at least the full viewport height */
display: flex;
flex-direction: column;
}
/* Style the header and main content area */
.header {
background-color: #3498db;
color: #fff;
padding: 20px;
}
.main {
flex-grow: 1;
/* Allow the main content area to grow and fill available space */
padding: 20px;
}
/* Style the footer as a sticky element */
.footer {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
position: sticky;
bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
!-- Your header content here --!
<div class="header">
<h1>Website Header</h1>
</div>
!-- Your main content here --!
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>
</div>
!-- Your footer content here --!
<div class="footer">
<p>© 2023 Your Website Name</p>
</div>
</body>
</html>
Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
