页脚与绝对位置 - 响应式设计

我的响应式设计有点问题。我正在使用这种风格的正常<footer>。页脚与绝对位置 - 响应式设计

footer { 
    width: 100%; 
    height: 20px; 
    position: absolute; 
    bottom: 5px; 
    left: 0; 
}

它工作正常，当我使用较小的屏幕我必须滚动，这是正常的。

问题是<footer>不在底部。它在屏幕的中间。像全屏的margin-top: 100%一样，没有滚动。

我希望你明白我的意思。

谢谢！

来源

2015-03-31 Matthias M

请搜索网站上发布之前，这已被问过一吨的时候。您正在寻找[**粘滞页脚**]（https://css-tricks.com/snippets/css/sticky-footer/）。 – Ruddy 2015-03-31 08:47:21

谢谢！我不记得“sticky”这个词。 – 2015-03-31 09:06:43

制作位置固定的，这可能是这个样子

footer { 
    width: 100%; 
    height: 20px; 
    position: fixed; 
    bottom: 5px; 
    left: 0; 
}

来源

2015-03-31 08:57:37

这个想法是将元素固定在底部。使用底部或底边参数设置底部偏移量。

你可以用这个去：

footer { 
    position:fixed; 
    height:20px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin-bottom:0px; 
}

来源

2015-03-31 08:48:07

我希望我正确地得到您的问题。你的问题是，当页面中的内容很少时，页脚位于屏幕中间，对吧？

为了解决这个问题，你应该让父元素占据整个屏幕。例如，

<head> 
<style> 
footer { 
    width: 100%; 
    height: 20px; 
    position: absolute; 
    bottom: 5px; 
    left: 0; 
} 
body { 
    min-height: 100%; 
} 
</style> 
</head> 
<body> 
<div> 
    some other content 
</div> 
<footer> 
    Some content inside footer 
</footer> 
</body>

或者，如果您不介意页脚始终在屏幕底部可见，请使用position：fixed。那么你不需要考虑父元素的高度。

来源

2015-03-31 08:48:39 cytsunny

页脚与绝对位置 - 响应式设计

回答

相关问题