The title pretty much says it all. I want the CSS margin: top;
on my HTML main_content
element to be relative to (a percentage of) the browser window (so that the main_content
always stays on the bottom of the browser window. How can I accomplish this?
I've tried this and it doesn't work. (the body {height:100vh}
doesn't seem to make body
any height as the main_content
doesn't stick to the bottom as it should.
body {height:100vh}
#main_content {position:absolute; width:100%; display:block; left:0; bottom:0; text-align:center; padding:20px;}
<div>Extra Infomation </div>
<div id="main_content">
<p>here you can learn about me and my adventures</p>
</div>
(Don't try this right now) If you go to my website, you will see the "learn about me and my adventures" heading, that, along with the "recent activity", and other stuff below that, that is the section I want at the bottom of the browser window, preferably with the "learn about me and my adventures" part just sticking out from the bottom of the page.
margin-top
value in%