是否可以将 div 与具有位置的 div 底部对齐：固定？

Question

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

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

我在这里找到了一些关于将 div 与 position: absolute 对齐到具有 position: 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;
}