<分区>
标签 javascript jquery html css
<分区>
如何使页脚在内容短于屏幕高度时粘在底部，而在内容长于屏幕高度时 float 到内容底部？现在我正在这样做。
html
<body>
<div class='container'>
</div>
<footer>
</footer>
</body>
CSS
.container{
position:relative;
min-height:500px;
}
footer{
height:200px;
background-color:black;
position:absolute;
bottom:0px;
}
当内容短于屏幕尺寸或非常短时，此代码没问题。但我的问题是当内容非常长时(例如屏幕尺寸的两倍)，页脚在首次加载页面时会粘在底部。但是当我向下滚动时，页脚会堆叠到新滚动内容的顶部。
最佳答案
$(document).ready(function(){
var containerHeight = $('.container').outerHeight(true);
var windowHeight = $('window').height();
if(containerHeight < windowHeight ){
$('footer').css('position','fixed');
}
});
关于javascript - 当内容很短但在 CSS 中不固定时，如何制作一个固定在底部的页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33749593/