Currently, I am in the process of creating a basic responsive HTML template that consists of three sections â header, body, and footer. The design includes images for both the header and footer, as well as a background image for the body section. However, I am facing an issue where the footer is not fixed at the bottom of the page, and I would like to limit the maximum height to 1024px.
Here is how the layout is supposed to look:
And here is the current output:
I have tried various combinations of CSS styles, but I cannot seem to figure out what is causing the problem with my code.
Below is the complete code snippet:
<!doctype html>
<html>
<head>
<title>Put your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
max-height: 1024px;
background-image: url(landing-page3.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.wrapper {
height: 100%;
}
.main {
height: 70%;
}
.header {
height: 15%;
}
.footer {
height: 15%;
}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div id="header">
<img src="headerf.png" style="width:100%;">
</div>
<div id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry...
</div>
<div id="footer">
<img src="footer.png" style="width:100%; position: absolute; bottom: 0;">
</div>
</div>
</body>
</html>