页脚元素

Question

我准备了一个小提示来向你展示我的问题：https://jsfiddle.net/8a1qgodv/

页脚 - 元素元素绝对位于底部，为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>

Answer 1

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

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

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

.site-wrapper {
    position:relative;
}

Here's a working fiddle for you

我还建议您阅读Mr Alien's answer on this SO Question。具体来看看Demo 3＆amp; 4。

这是对绝对定位的精彩演示和解释。

修改

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

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

Here's a working fiddle

Answer 2

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

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

给每一个＆＃39; div＆＃39;一个特定的高度，然后他们不会互相溢出

这里有一个例子https://jsfiddle.net/8a1qgodv/2/

Answer 3

你可以给它一个响应的高度。

.container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  height: 10vh;
  background: #006dcc;
}

.content {
  height: 85vh;
}

footer {
  height: 5vh;
  background: #006dcc;
}

<div class=container>
  <header></header>
  <div class="content"></div>
  <footer></footer>
</div>