灵活的主着陆页

我想创建一个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应始终位于启动页面的底部（加载的网页的第一个视图部分），但随着我们向下滚动主横幅而向上移动。

我该如何做到这一点？（一个很好的例子是贝宝网站 - 尽管我检查了这些元素，但很难理解它。任何快速简单的方法？）

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

来源

2014-10-02 user1012181

显示你已经尝试过的CSS会更容易回答这个问题。一个[jsfiddle]（http://jsfiddle.net）也会有帮助。 – ASGM 2014-10-02 18:03:45

贝宝的例子似乎并不显示底部的菜单栏功能，据我所知。另外，你是否希望元素保持完全固定（内容滚动在下面？） – Stratboy 2014-10-02 18:12:18

要获得底部菜单栏留在页面的底部添加此CSS：

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

让主旗帜是可调整大小的使用width:100%;，而不是一个明确的宽度像600px的。

来源

2014-10-02 18:04:59 Youngin

灵活的主着陆页

回答

相关问题