Question

我最近开始为我家的公司建立一个网站，但我在定位上遇到了一个小问题。我使用它来定位页脚（我认为这很典型）：

.footer-container{
    background:#f7f7f7;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

问题是，我在页脚上方有一个相对定位的兄弟div类。由于绝对定位的元件从正常流动中移除，因此相对定位的div在页脚后面重叠。这使得部分文本/图像也将隐藏在页脚后面。另外，如果我想在兄弟div类中使用绝对定位的元素，我将不得不考虑页脚的高度，因为我不能只使用像bottom:0;这样的东西。我真的不知道怎么做，因为我没有指定页脚高度，因为我希望它对于不同的分辨率是相对相同的高度。有什么方法可以解决这个问题吗？

Answer 1

这是Ryan Fait's HTML5粘贴页脚的实现。我相信这对你有用。

HTML

<div class ="wrapper">
    <div id="sibling">Sibling</div>
    <div class="push"></div>
<div>
<div class="footer-container">Footer</div>

和CSS

    * {
    margin: 0;
}
html, body {
    height: 100%;
}

#sibling {
    position: relative;
    border: 1px solid black;
    height: 700px;
}

.wrapper {
    min-height: 100%;
    margin: 0 auto -100px; 
}

.footer-container, .push {
    height: 100px;
}

.footer-container {
    background:#f7f7f7;
    width:100%;
    border: 1px solid black;
}

Fiddle

是否可能有绝对定位的元素影响兄弟元素的位置？

1 个答案: