css - 是否可以将 div 对齐到位置为 : fixed? 的 div 的底部

Question

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

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

我在这里找到了一些关于将具有 position: absolute 的 div 对齐到具有 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 和所有其他的都在这个 fiddle 里: 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;

 }