Question

我想让我的320px视口中的固定页脚可以调整大小，以及其中的绝对元素。

我设法让页脚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中的菜鸟，所以我希望有人可以启发我，并原谅我的英语不好。希望不是那么令人困惑。感谢

这是小提琴：http://jsfiddle.net/5JWG5/ 全屏小提琴：http://jsfiddle.net/5JWG5/embedded/result/

Answer 1

我不会感到你想要做的事情，我说西班牙语，如果这种语言适合你，你可以更好地解释它。

无论如何，我认为您可以使用position: relative;代替position:absolute;。

＆＃34;内联块＆＃34;具有文字功能，因此您可以使用text-align: center;或使用display:block;并将所有内容浮动到左侧。

但我不明白＆＃34;漂浮＆＃34;你的元素，如果给他们一个绝对的位置..可能你可以用jsfiddle更好地解释你的观点。

没有必要使用max-width: 100%;您只需将宽度设置为100％的大小并声明最小宽度尺寸，例如＆＃34; 320px＆＃34;并且div不会小于这个大小。

希望这可以帮到你:)

Answer 2

好的，我希望这有助于你，首先：

使用div而不是列表更容易，因此我们可以更好地实现元素的位置。

<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内部的链接给它们大小，我们将全部浮动到左侧。使用display: inline-block和text-align: left;（您也可以使用display: block;和float: left;，但您应该给他们一个保证金）

这是新的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;（我用它来直观地指出更改）

希望这对你有所帮助。

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

2 个答案: