Hi,
A beginner question, I need to place a div to always stay at bottom of
the viewport even if there is no other element in the html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
#footer {
position: relative;
bottom: 0px;
}
</style>
</head>
<body>
<div id="footer"> Test Footer </div>
</body>
</html>
In the embedded css, I used "position: relative" which I thought will
accomplish my requirement, but its not working as I expected, If there
is no other element in the page, then this div goes to top.
I can use "position: absolute" or "position: fixed" to make the div stay
at end. But If the page grows, they overlap with other growing elements.
I need to make the #footer div, always stay at bottom, if the page
grows, then it should stay at bottom and it should not overlap with
other growing elements.
how to make it? Need CSS experts guidence. Went through lot of pages
(flex boxes, flux columns, setting height: 100% to <html> tag etc.,)
nothing works.
Thanks,
Mohan R
_______________________________________________
ILUGC Mailing List:
http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
ILUGC Mailing List Guidelines:
http://ilugc.in/mailinglist-guidelines
