灵活的主登陆页面

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