粘性页脚元素未对齐

Question

非常简单的问题。在网站周围摸索了一下，似乎没有任何效果。

我的网站底部有一个粘性导航，它没有粘在底部！它不尊重我的身高规则，而且毫无顾忌地溢出来。

我尝试过的事情：

• 清除修复
• 溢出
• 表格展示

诚实地尝试了我所知道的一切。

我的视觉目标：

Fiddle Link

CSS / HTML / 演示

.fn {
  width: 100%;
  height: 100%;
  max-height: 41px;
  bottom: 0;
  left: 0;
  position: absolute;
  background-color: #fff;
}
.fn ul {
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fn li {
  display: inline-block;
}
.fn a {
  display: block;
  padding: 10px 5px 10px 30px;
  text-decoration: none;
  font-family: "Raleway", sans-serif;
  font-size: 1.15em;
  letter-spacing: 0.05em;
  color: #000;
}
.fn .first {
  margin-right: 45.5px;
  background-image: url(http://s28.postimg.org/f3f2a8mnd/fi2.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px 25px;
  top: -14px;
  position: relative;
}
.fn .mid {
  height: 55px;
  bottom: 0;
  margin: 0 auto;
  z-index: 9998;
}
.fn .mid img {
  height: 100%;
  display: inline-block;
}
.fn .second {
  margin-left: 45.5px;
  background-image: url(http://s28.postimg.org/ag908gzah/fi1.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px 25px;
  top: -14px;
  position: relative;
}

<div class="fn">
  <ul>
    <li> <a href="resume.pdf" target="_blank" class="first" id="L3"> Resume </a> 
    </li>

    <li class="mid">
      <img src="http://s18.postimg.org/v70ga0bvt/image.png"></img>
    </li>

    <li> <a href="mailto:" class="second" id="L4"> Contact </a> 
    </li>
  </ul>
</div>

Answer 1

您必须将 absolute 位置更改为 fixed 和 vertical align li 元素 top。

.fn {
    width: 100%;
    height: 100%;
    max-height: 50px;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: #fff;
}
.fn ul {
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fn li {
    display: inline-block;
    vertical-align: top;
}
.fn a {
    display: block;
    padding: 10px 5px 10px 30px;
    text-decoration: none;
    font-family:"Raleway", sans-serif;
    font-size: 1.15em;
    letter-spacing: 0.05em;
    color: #000;
}
.fn .first {
    margin-right: 45.5px;
    background-image: url(http://s28.postimg.org/f3f2a8mnd/fi2.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px 25px;
    position: relative;
}
.fn .mid {
    height: 55px;
    bottom: 0;
    margin: 0 auto;
    z-index: 9998;
}
.fn .mid img {
    height: 100%;
    display: inline-block;
}
.fn .second {
    margin-left: 45.5px;
    background-image: url(http://s28.postimg.org/ag908gzah/fi1.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px 25px;
    position: relative;
}
.fn li:first-child, .fn li:last-child {
    padding-top: 10px;
}

小提琴：http://jsfiddle.net/mcwo8qvz/7/

Answer 2

您好，只需将您的 fn 类 div 固定到位置并将您的最大高度扩展到 55 像素

这里是 jsfiddel = http://jsfiddle.net/mcwo8qvz/2/

.fn {
  width: 100%;
  height: 100%; 
  max-height: 55px;
  bottom: 0;
  left: 0;
  position: fixed;
  background-color: #fff;
}