html - 可调整大小的固定页脚，其中包含绝对元素

Question

我想让我的固定页脚在我的 320 像素视口(viewport)上可调整大小，连同其中的绝对元素。

我设法使页脚 div 可调整大小，但当我调整窗口大小时，其中的元素似乎并没有粘在页脚 div 中。

注意:我正在尝试创建一个带有背景图像的页脚。此图像有一些我使用无序列表创建的可点击区域。

这是我的 HTML 代码:

<footer>
    <ul>
        <li><a href="form.php" class="iframe shootme-link">Shoot Me</a>

        </li>
        <li><a href=" " target="_blank" class="facebook-link">Facebook</a>

        </li>
        <li><a href=" " target="_blank" class="tumblr-link">Tumblr</a>

        </li>
        <li><a href=" " target="_blank" class="instagram-link">Instagram</a>

        </li>
        <li><a href=" " class="mail-link">E-mail</a>

        </li>
    </ul>

</footer>

这是我的 CSS 代码:

footer{
    z-index:21;
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:0;
    width:1280px;
    height: 426px;
    max-width: 100%;
    background:url(../images/layout/footer.png) no-repeat center bottom;
    background-size: 100%;
    margin:0 auto;
    pointer-events:none;
}

footer ul li {
    display: inline;
    width: 14%;

}

footer ul li img {
    border: none;
    padding-left: 8px;
}

footer ul li a.shootme-link{
    position:absolute;
    bottom:200px;
    left:1080px;
    width: 151px;
    height: 33px;
    background:url(../images/layout/shootme.png) bottom;
    pointer-events:auto;
    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}
footer ul li a.shootme-link:hover {
    background-position: 0 0;
}
footer ul li a.facebook-link {
    position:absolute;
    width:33px;
    height:29px;
    bottom:40px;
    left:970px;
    pointer-events:auto;
    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}
footer ul li a.tumblr-link {
    position:absolute;
    width:33px;
    height:29px;
    bottom:40px;
    left:980px;
    pointer-events:auto;
    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}
footer ul li a.instagram-link {
    position:absolute;
    width:33px;
    height:29px;
    bottom:40px;
    left:1030px;
    pointer-events:auto;
    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}
footer ul li a.mail-link {
    position:absolute;
    width:33px;
    height:29px;
    bottom:40px;
    left:1055px;
    pointer-events:auto;
    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

我在 CSS3 方面仍然很菜鸟，所以我希望有人能在这方面启发我并原谅我糟糕的英语。希望不会那么困惑。谢谢

这是 fiddle :http://jsfiddle.net/5JWG5/ 全屏 fiddle :http://jsfiddle.net/5JWG5/embedded/result/

Answer 1

好的，我希望这对你有帮助，首先:

使用div 比使用list 更容易，所以我们可以更好地实现元素的位置。

<footer>
    <div class="shootme-link">
        <a href="form.php"  class="iframe">Shoot Me</a>
    </div>

    <div class="social">
        <a class="facebook-link" href=" " target="_blank" >Facebook</a>
        <a href=" " target="_blank" class="tumblr-link">Tumblr</a>
        <a href=" " target="_blank" class="instagram-link">Instagram</a>
        <a href=" " class="mail-link">E-mail</a>
    </div>
</footer>

如您所见，我还减少了类的数量，而不是为每个元素使用一个类，现在我只使用一个名称“social”，这将是一个嵌套链接元素的 Div 框。

然后，我们将指向该 div 内的链接以赋予它们大小，我们将全部 float 到左侧。使用 display: inline-block 和 text-align: left;(你也可以使用 display: block; 和 float: left ; 但你应该给他们一个 margin )

这是新的 CSS

footer{
  z-index:21;
  display:block;
  position: absolute;
  margin: 0 auto;
  bottom:0;
  left: 0;
  right: 0;
  width:1280px;
  height: 426px;
  max-width: 100%;
  background:url("http://jennisa.com/images/layout/footer.png") no-repeat right bottom;
  background-size: cover;
  pointer-events:none;
}


footer > .shootme-link {
    display: block;
    position:absolute;
    bottom:200px;
    right: 50px;
    width: 151px;
    height: 33px;
    background:url("http://jennisa.com/images/layout/shootme.png") bottom;
    pointer-events:auto;
    /* Hide the text. */
    text-indent: -999px;
    overflow: hidden;
}

footer > .social {
    position: absolute;
    width: 163px;
    height: 32px;
    bottom: 46px;
    right: 163px;
    pointer-events: auto;
}

footer > .social > a {
    background-color: blue;
    width:33px;
    height:29px;
    display: inline-block;
    text-align: left;
    pointer-events:auto;
    /* Hide the text. */
    text-indent: -999px;
    overflow: hidden;
 }

有 a jsfiddle

对于背景大小，我使用属性 cover 而不是 100% 因为这将使图像的比例保持覆盖所有 div，而且我将图像定位到右边，因为那里是元素所在的位置(元素也定位于 absolute 因为右边。

你只需从链接中删除 background-color: blue;(我用它来直观地指出更改)

希望对您有所帮助。