css - 灵活的主着陆页

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 应始终位于初始页面的底部(已加载网页的第一个 View 部分)，但当我们与主横幅一起向下滚动时会向上移动。

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

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

Answer 1

要使底部菜单栏位于页面底部，请添加此 css:

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

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