If you understand the logic of HTML the answer is clear on how to do it. If your asking or having problems then you may not fully understand the logic.
Lets examine a basic HTML page.
Now if you know even the most basic HTML. This should be clear and you should be able to visualize what page will look like in a web Browser.
Now lets add a div with nothing inside of it.
Can you see the div when you view the page in a web browser? Maybe it is because div doesn’t have any color? Lets add some color to it.
Wait we still can’t see the color. We read left to right top to bottom. And so do the web browsers that display our web pages. As far as the browser is concerned the end is the end. We need to tell the browser to make the entire page 100% in height. Once we make the entire page 100% in height then we can make anything 100% in height.
Remember HTML is like alegebra. What we do to one side we must do to the other side. So we have the at the top and at the bottom we have . So the browser sees that first. And since the tag doesn’t have a specified height, it only takes on the height that is needed by the objects nested inside of it. What happens if we make our code look like the following.
Oh my god, it worked. But
if we understood the logic we should have known it would work.