Question

我正在制作一个网站，我有一个导航栏和一个主要内容部分，导航栏位于屏幕顶部，主要内容位于屏幕底部附近。但是，如果我更改屏幕高度，主内容部分将保持在同一位置，并且它会离开我的浏览器视口/窗口并消失，这是完全正常和预期的。但我想要的是主要内容部分始终位于屏幕底部的同一位置，无论屏幕尺寸/分辨率/高度如何。我怎么能做到这一点？

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

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

感谢您的时间和精力！

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

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

Answer 1

您可以通过CSS3 VH属性[查看端口高度]使用存档。为此，您必须制作一个容器并将其高度添加到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＆＃39; s resize

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

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

2 个答案: