为什么页脚不在底部

我有一个我正在工作的网站。我想让页脚坚持页面的底部。所以我跟着一个简单的指南，基本上这样做：为什么页脚不在底部

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
    position: relative; 
    padding-bottom: $footer-height + $footer-margin-top; 
} 

.footer { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: $footer-height; 
}

这似乎在开始工作。然后，我进入了一个舞台，其内容超过了观看端口的高度，这是当事物停止工作时。

如果你看this你可以看到页脚在页面的底部。如果你看this，页脚位于视口的底部。我知道这是一个简单的修复，但我无法弄清楚。请有人可以帮我一把。

来源

2016-08-15 r3plica

变化'位置：absolute'为'.footer'到'位置：fixed' –

https://codepen.io/cbracco/pen/zekgx 看一看的链接，这将是excatly什么你要！ –

Sanket，这是我所遵循的确切教程，但由于某种原因，我的网站无法正常工作。 – r3plica

您希望您的页脚在页面底部粘除非body内容是足够大，它出现在滚动后？

如果是这样，你应该设置你的身体标记height: auto;，所以如果它超过100%组上你的min-height规则，它考虑到并推向底部的页脚。

让我知道这是否是您的预期行为。

来源

2016-08-15 15:49:55

是的，那正是我想要的。我知道这将是简单的:) – r3plica

不起作用。如果html设置为auto，那么当内容大于视图区域时，它会将页脚置于底部。如果内容小于视图区域，则它仅位于内容的底部（我需要它位于视图区域的底部） – r3plica

您是否在谈论视图底部的页脚？克莱德已经回答了它。你需要固定定位。 – Vcasso

变化 position:absolute为.footer到position: fixed

来源

2016-08-15 15:46:55

.footer { 
    position: static; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    height: $footer-height; 
}

来源

2016-08-15 16:12:48

为什么页脚不在底部

回答

相关问题