HTML/CSS页脚不坚持底部移动在屏幕上调整大小

我有以下尝试，试图做一个简单的粘脚。HTML/CSS页脚不坚持底部移动在屏幕上调整大小

我的问题是页脚不是底部，我怀疑这可能是一个CSS问题。

非常感谢，如果有人可以给以下代码扫描并提供一些建议。

#footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: red; 
    position: absolute; 
    bottom: 0; 
} 
    <footer class="footer" id="footer"> 
    <div class="footLeft" style="width:75%; float:left;"> 
    </div> 
    <div class="footerRight" style="width:25%; float:right; padding:25px;"> 
     <button class="btn btn-danger" style="font-size:20px;">Sign Up</button> 
    </div> 
    </footer>

的问题林具有/输出

来源

2017-02-25 Timothy Coetzee

你相对于身体标记位置给出。如果您可以分享演示网址，以便我们可以对其进行评估，那将会很棒。你的页脚属性很好。我想这个问题必须与相对容器 –

正如你所看到的位置属性设置为'位置：绝对'没有额外的包装页脚 –

@TimothyCoetzee你的'身体'CSS看起来像什么？你是否曾尝试添加'body {min-height：100vh;}'，假设你想让身体至少保持视口的高度？ –

添加以下规则体

body { 
    min-height:100%;/*or 100vh */ 
    position:relative; 
}

说明：

min-height属性将确保身体至少占用视口高度的100％。这种方式即使你的内容较少，页脚也会始终粘贴在视口的底部。

Position: relative规则设置，使得页脚的位置相比绝对的身体，而不是任何其他包装

来源

2017-02-25 05:33:08

Kiran Dash工作！你介意给出一个解释，为什么我必须在身体上设置最小高度属性..？ –

当然。我会解释并更新答案。很高兴它帮助 –

我已经更新了答案。希望有所帮助。如果它解决了你的问题。请确保将其作为正确答案进行检查。祝你有美好的一天 –

你可以使用这个原生类来实现粘页脚bootstrap--

<div class="footer navbar-fixed-bottom">

来源

2017-02-25 05:34:06 neophyte

另一种可能是使用position:fixed，而不会影响正文css。在这种情况下，页脚将在活动页面的底部总是如果滚动条总是存在

例

#footer { /* position must be absolute and bottom must be 0 */ 
    height: 100px; 
    width: 100%; 
    background: red; 
    position: fixed; 
    bottom: 0; 
}

见fiddle

来源

2017-02-25 05:41:10 Massimo

HTML/CSS页脚不坚持底部移动在屏幕上调整大小

回答

相关问题