The standard structure follows:
<body>
<div class="wrapper">
<nav></nav>
<myContent></myContent>
</div>
</body>
<footer></footer>
In this setup, the footer is expected to appear below the body without being influenced by the CSS applied to the body or its elements.
The goal is to keep the footer positioned at the bottom of the page regardless of the amount of content within the body. To achieve this, the following CSS should be used:
body, html {
height: 100vh;
}
.wrapper {
min-height: 96vh;
position: relative;
}
footer {
width: 100%;
height: 4vh;
position: relative;
bottom: 0;
font-size: .75em;
}
Upon inspection in my browser, I noticed that the footer is contained within the body tag, which seems illogical. Furthermore, the footer appears with a width matching the viewport in the code, but it does not render as such on the display. It shows some whitespace on the right side besides border area. When applying background-color: yellow, this becomes more apparent. Additionally, the positioning issue persists unless there is enough content in <myContent> pushing it below the visible screen area.
What could be the problem with this layout?