如何使我的页面的一部分始终相对于屏幕位于相同的位置？

Question

我正在制作一个网站，我有一个导航栏和一个主要内容部分，导航栏位于屏幕顶部，主要内容位于屏幕底部附近。但是，如果我改变我的屏幕高度，主要内容部分会停留在同一个地方，它会从我的浏览器视口/窗口中消失并消失，这是完全正常的，也是意料之中的。但我想要的是主要内容部分始终位于屏幕底部的同一位置，无论屏幕尺寸/分辨率/高度是多少。我怎样才能做到这一点？

我的网站是jeffarries.com，如果您需要视觉效果，我正在谈论的是在我的主页上。

我使用过 JavaScript，但对它不是很熟悉。 我没有使用 jQuery 的经验，但是我可以很好地实现一个完整的 jQuery 脚本。

感谢您的时间和精力！

如果需要任何进一步的信息，请告诉我。

---

更新：由于这个问题似乎不清楚，请访问我的网站，你会看到“在这里你可以了解我和我的冒险”的文字，我想要那个文字加载时出现在浏览器窗口的底部，但是，我希望它保持在通常的流程中，位于“最近的活动”框的顶部。基本上我希望文本顶部的边距根据浏览器窗口的高度而变化，将文本保持在浏览器窗口的底部。

Answer 1

您可以通过 CSS3 VH 属性 [ View Port Height ] 使用存档。为此，您必须制作一个容器并将其高度添加到 100vh。 这是现场演示 - https://jsfiddle.net/8dptzvye/

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
.container{height:100vh}
.container span{position:absolute; width:100%; display:block; left:0; bottom:0; text-aling:center; padding:20px; background:black; color:#fff}

<div class="container">
<div class="cover">Extra Infomation </div>
<span>here you can learn about me and my adventures</span>
</div>

Answer 2

您可能正在寻找position: fixed

编辑

如果要根据窗口大小改变margin，可以使用jquery的resize

$(window).resize(function () { /* change margin of element */ });