Is it possible to align a div to the bottom of a div with position: fixed?

Question

I'm trying to create a sort of navigational footer that only displays when the mouse hovers over it. The hover zone is 10% of the screen height but the links are fixed along the bottom of the window. Everything is working fine, but I would like to have a 50px tall white background below the text links at the very bottom to make the links easier to see, for example above image, text, etc.

I could make the entire "hover" div white, but I would really prefer to have just a smaller are at the bottom. Sorry if this is a little unclear—I've created a fiddle to illustrate. Please bear in mind that the colors are only for illustration purposes. None of the divs will have background colors except for the #white_bg div at the very bottom.

I found some posts on here about aligning a div with position: absolute to the bottom of a div with position: relative, but unfortunately I think I need to have fixed positioning on my containing div.

Here is a quick sketch showing what I'm trying to achieve:

Here's the code I am using:

<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>

The CSS and all the rest is in this fiddle: http://jsfiddle.net/09kj9hpq

I'm also open to other suggestions of how to achieve this. Thank you in advance for any help you can offer!

Answer 1

I think this is what you are after

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;

 }