Issue
I've attempted to position my footer at the bottom of the page without resorting to adding flexbox styles to the body, similar to this question. I'd like to achieve this without applying the fixed style directly to the footer and applying flexbox style to the body tag. Is this possible? Any insights or solutions would be greatly appreciated. Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body style="height: 1000vh">
<header style="background-color: red;height: 30vh;"></header>
<main style="background-color: green;height: 30vh;"></main>
<footer style="background-color: blue;height: 30vh;"></footer>
</body>
</html>expected result
Solution
You just set body to position: relative, then the footer, can be set to position: abolute, then you can use bottom, left, right to zero, this will ensure the footer is positioned always at the bottom of the body.
Also to ensure the main content is not intersecting the footer, you can add the margin-bottom: 20vh to the main tag to ensure that there is no overlap!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body style="height: 1000vh;position: relative;">
<header style="background-color: red;height: 30vh;"></header>
<main style="background-color: green;height: 30vh;"></main>
<footer style="background-color: blue;height: 30vh;position: absolute;bottom:0px;left: 0;
right: 0;"></footer>
</body>
</html>Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.