javascript - 如何根据浏览器高度制作 `margin: top;`？

Question

标题几乎说明了一切。我希望我的 HTML main_content 元素上的 CSS margin: top; 相对于浏览器窗口(的百分比)(以便 main_content 始终停留在浏览器窗口的底部。我怎样才能做到这一点？

---

我试过了，还是不行。 (body {height:100vh} 似乎没有让 body 有任何高度，因为 main_content 没有粘在底部，因为它应该。

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>

(现在不要尝试这个)如果你去我的website ，你会看到“了解我和我的冒险”标题，以及“最近的事件”和下面的其他内容，这是我想要在浏览器窗口底部的部分，最好是“学习”关于我和我的冒险”部分从页面底部突出。

Answer 1

给 .main_content 一个 margin-top 100vh(就在视口(viewport)下方)，然后使用 transformY 将它拉回来:

.main_content {
    text-align: center;
    padding: 20px;
    margin-top: 100vh;
    transform: translateY(calc(-100% - 20px));
	background:lightblue;
}
.below_content{
	margin-top:-100px;
}

<div class="wrapper">
    <div>Extra Infomation </div>
    <div class="main_content">
        <p>here you can learn about me and my adventures</p>
    </div>
</div>
<div class="below_content">
    This is content below the main content
</div>