在视口底部的菜单，然后坚持顶部

Question

我试图实现something like this（底部的菜单100％高度的背景图片），但无法弄清楚如何到达那里。

我的问题是，无论我在HTML代码中包含<div class="main-menu">的哪个位置，它都会变为不可见或不应放在应该放在哪里...请参阅my jsfiddle here。

或者另一个更好的选择也许是背景图片取100％的视口高度减去50px（菜单的高度）？

感谢您的帮助

CSS

html,body{height: 100%} 

body { 
    background-color: #ffffff; 
    font: 300 1em/1.38 'Open Sans'; 
    color: rgb(128, 128, 128); 
} 

header { 
    position: relative; 
    float: left; 
    z-index: 12; 
    width: 100%; 
    height: 90%; 
} 

.element { 
    float: left; 
    width: 100%; 
    height: 100%; 
    background-size: 100% auto; 
    background-attachment: fixed; 
} 

.element-1 { 
    position: relative; 
    z-index: 8; 
    border-top: 10px solid rgb(0, 0, 0); 
    background-image: url('http://placekitten.com/800/800?image=1'); 
    background-position: center center; 
    background-color: rgb(222, 222, 222); 
} 
.main-menu { 
    width: 100%; 
    height: 50px; 
    background: #358acb; 
    position: absolute; 
    color: #000; 
} 

HTML

<header> 
    <div class="element element-1"></div> 

    </header> 
    <p class="logo">LOGO</p> 
    <article> <div class="main-menu">This will be the menu</div> 

Answer 1

底部：0像素; left：0; z-index：20;如果我理解正确，这应该解决您的问题，然后当然需要一些样式。

.main-menu { 
    width: 100%; 
    height: 50px; 
    background: #358acb; 
    position: absolute; 
    color: #000; 
    bottom:0px; 
    left: 0; 
    z-index:20; 
} 

见DEMO