Html 页脚元素的定位

我准备了一把小提琴向你展示我的问题：

页脚元素以0px绝对定位在底部。 但是，如果设备的高度低于730px，则页脚将自身定位在页面主体元素上

我在没有绝对位置的情况下尝试了它，但是在Galaxy S5设备上，页脚不会粘在底部。在页脚和底部之间总是有一个小的空白，比如20px左右

你能给我一些关于如何解决这个问题的提示吗

HTML如下所示：

<div class="site-wrapper">
        <div class="container">
            <div class="page-header">
                <img class="img-responsive" src="http://www.smoshmosh.com/images/startseite_logo.png"/>
            </div>
            <div class="page-body indexPageBody">
                <img class="img-responsive" src="http://www.smoshmosh.com/images/startseite_content.png"/>
                <div class="startButton">
                    <a id="startButton" href="dummyUrl"><img id="startButtonImg" class="img-responsive" src="http://www.smoshmosh.com/images/start_button.gif"/></a>
                </div>
            </div>
            <div class="page-footer">
                <img class="img-responsive" id="startseiteFooter" src="http://www.smoshmosh.com/images/startseite_footer.png"/>
                <button id="audioToggleButton" class="startAudio"><img id="musicImage" class="img-responsive" src="http://www.smoshmosh.com/images/music_on.png"/></button>
            </div>
        </div>
    </div>

.site-wrapper {
    position:relative;
    padding-bottom: 230px;
}

---

很酷，所以这不是一个很难解决的问题

绝对定位元素高度依赖于其具有非静态位置的父元素的定位

您可以通过创建以下CSS规则来解决问题

.site-wrapper {
    position:relative;
}

我还建议大家通读一下。具体来看演示3和4

这是一个极好的绝对定位演示和解释

编辑：

此外，您需要通过在站点包装的底部创建填充来为绝对定位的页脚留出空间，如下所示：

<div class="site-wrapper">
        <div class="container">
            <div class="page-header">
                <img class="img-responsive" src="http://www.smoshmosh.com/images/startseite_logo.png"/>
            </div>
            <div class="page-body indexPageBody">
                <img class="img-responsive" src="http://www.smoshmosh.com/images/startseite_content.png"/>
                <div class="startButton">
                    <a id="startButton" href="dummyUrl"><img id="startButtonImg" class="img-responsive" src="http://www.smoshmosh.com/images/start_button.gif"/></a>
                </div>
            </div>
            <div class="page-footer">
                <img class="img-responsive" id="startseiteFooter" src="http://www.smoshmosh.com/images/startseite_footer.png"/>
                <button id="audioToggleButton" class="startAudio"><img id="musicImage" class="img-responsive" src="http://www.smoshmosh.com/images/music_on.png"/></button>
            </div>
        </div>
    </div>

.site-wrapper {
    position:relative;
    padding-bottom: 230px;
}

---

要将页脚粘贴到页面底部，请更改CSS，如下所示

.page-footer {
    max-width: 500px;
    /*position: absolute;*/ // you were using absolute .. remove it 
    bottom: 0;
}

给每个“div”一个特定的高度，这样它们就不会互相溢出

---

下面是一个例子

您可以给它一个响应高度

.container{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
标题{
高度：10vh；
背景#006dcc；
}
.内容{
高度：85vh；
}
页脚{
高度：5vh；
背景#006dcc；
}

Mh，这并没有真正改变什么。当站点包装器是position:relative时，页脚总是在页面主体上方。我不确定我是否理解这个问题？它在小提琴中工作-那么你是说它在你的实时实现中不工作吗？我看不出它在小提琴中工作。看一看，它看起来是这样的：我假设你也不希望它悬停在底部的按钮上？然后，您可以调整站点包装的填充-请参阅我的编辑：）我非常感谢您的帮助，但是如果我设置230px，它将不再响应，并且只在一台设备上工作。是的，它不应该停在按钮上。应该有一个空间，我不知道，20像素之间的所有时间。在每个设备上，我不能给它一个特定的高度，我只想定义宽度，这样它就会有响应。我认为这就是问题所在？您的div内容集成没有正确完成，有些内容不在div中。。你能上传设计（照片）。。。这样就可以很容易地向您显示div对齐方式。。希望我们能解决这个问题