在視口底部的菜單，然後堅持頂部

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