如何根据浏览器高度设置“margin: top;”？

Question

标题基本概括了所有内容。margin: top;我希望HTML 元素上的CSSmain_content与浏览器窗口（的百分比）相关（以便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>

（现在不要尝试这个）如果您访问我的网站，您将看到“了解我和我的冒险”标题，以及“最近的活动”以及下面的其他内容，这就是该部分我想要在浏览器窗口的底部，最好是“了解我和我的冒险”部分从页面底部伸出。

Answer 1

给 .main_content 的 margin-top 为 100vh （就在视口下方），然后使用 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>