灵活的主登录页面

Question

我想创建一个html页面，在其中我想在第一部分显示一个全屏图像。

<header>
 <div class="menu"> </div>
 <div class="logo"></div> <div class="sub-menu"></div>

 <div class="main-banner"></div>
 <div class="bottom-menu-bar"></div>
</header>

在这里，我希望main-banner能够根据屏幕大小灵活调整。此图像应自动适应屏幕大小。bottom-menu-bar应该总是在首页的底部(加载的网页的第一个视图部分)，但随着我们向下滚动主横幅而上升。

我如何才能做到这一点？(一个很好的例子是PayPal网站--虽然我检查了一些元素，但是很难理解它。有什么简单快捷的方法吗？)

谢谢你的帮助。如果需要任何信息，请告诉我。我在其他一些网站上发现了类似的问题，但没有明确的答案。

Answer 1

要让底部菜单栏停留在页面底部，请添加以下css：

.bottom-menu-bar{
     position: fixed;
     bottom: 0;
}

要让主横幅可以调整大小，请使用width:100%;而不是像600px这样的显式宽度。