是否可以将div与div的底部对齐，其位置为：fixed？

Question

我正在尝试创建一种导航页脚，仅在鼠标悬停在其上时显示。悬停区域是屏幕高度的10％，但链接沿窗口底部固定。一切都很好，但我希望在最底部的文本链接下面有一个50px高的白色背景，以便更容易看到链接，例如上面的图像，文本等。

我可以让整个“悬停”div白色，但我真的更喜欢只有一个较小的底部。对不起，如果这有点不清楚 - 我已经创建了一个小提琴来说明。请记住，颜色仅用于说明目的。除了最底部的#white_bg div之外，所有div都没有背景颜色。

我在这里发现了一些关于将div与position对齐的帖子：绝对到div的底部有position：relative，但不幸的是我觉得我需要在我的包含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;
}