灵活的主要登陆页面

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这样的显式宽度。