是否有可能將div與位置的底部對齊：fixed？

Question

我正在嘗試創建一種只在鼠標懸停在其上時才顯示的導航頁腳。懸停區域是屏幕高度的10％，但鏈接沿窗口底部固定。一切工作正常，但我想在底部的文字鏈接下方有一個50px高的白色背景，以便使鏈接更易於看到，例如圖片，文字等。

我可以讓整個「懸停」div白色，但我真的更喜歡只有一個更小的底部。對不起，如果這有點不清楚 - 我創建了一個小提琴來說明。請注意，顏色僅用於說明目的。除了底部的#white_bg div以外，任何div都不會有背景顏色。

我在這裏找到了一些關於將div與位置對齊的帖子：絕對位置：relative的div底部，但不幸的是我認爲我需要對包含div的固定位置進行定位。

下面是一個速寫出我想要實現：

下面是我使用的代碼：

<div class="nav-bottom hidden-xs"> 
    <div id="white_bg"> 
     <div class="bottom-nav-left hidden-xs">Information</div>  
     <div class="bottom-nav-right hidden-xs">Index &nbsp;&nbsp;&nbsp; Next project</div> 
    </div> 
</div> 

的CSS和所有其餘的是在這小提琴： http://jsfiddle.net/09kj9hpq

我也接受其他建議如何實現這一點。提前感謝您提供的任何幫助！

Answer 1

我想這是你所追求的

JSfiddle Demo

CSS

body { 
    background-color: yellow; 
} 
.nav-bottom { 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    height: 10%; 
    min-height: 100px; 
    height: 10%; 
    z-index: 999; 
    cursor: pointer; 
    background-color: cyan; 
    /* bg color for purposes of this demo only */ 
} 
#white_bg { 
    background-color: white; 
    position: absolute; 
    height: 50px; 
    bottom: 0px; 
    width:100%; 
} 
.bottom-nav-left { 
    position: absolute; 
    bottom: 10px; 
    left: 20px; 
} 
.bottom-nav-right { 
    position:absolute; 
    bottom: 10px; 
    right: 20px; 
} 
.nav-bottom { 
    position: fixed; 
    opacity: 0; 
    transition: opacity .125s; 
    -moz-transition: opacity .125s; 
    -webkit-transition: opacity .05s; 
    -o-transition: opacity .125s; 
} 
.nav-bottom:link { /* not required as divs children*/ 
    opacity: 1; 
    transition: opacity .125s; 
    -moz-transition: opacity .125s; 
    -webkit-transition: opacity .05s; 
    -o-transition: opacity .125s; 
} 
.nav-bottom:hover { 
    opacity: 1; 
    transition: opacity .125s; 
    -moz-transition: opacity .125s; 
    -webkit-transition: opacity .05s; 
    -o-transition: opacity .125s; 

} 

Answer 2

我不知道我是否回答你的問題，但我希望我的回答對你有用。我創建了一個小提琴讓你自己清理：http://jsfiddle.net/r8mwcwk2/。頁腳（我相信將是您的空格）代碼如下：

#footer { 
    background-color:blue; 
    position:fixed; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    height:50px; 
    margin-bottom:0px; 
    font-family:helvetica; 
    text-align:center; 
    line-height:50px; 
}