さて、私はストレスを感じました。-大きな時間。
私はきちんとした粘着性のあるフッターを探して何年もの間ネット上でググった。さて、何を推測します。私が見つけたすべての粘着性のあるフッターはあなたに使用するように言ったmin-height:100%
。これは、ラッパーを醜くし、コンテンツがウィンドウ自体よりも小さい場合に動的な高さを削除するため、煩わしいものでした。
ですから、問題は、ラッパーを動的に保ちながら、どのようにしてスティッキーフッターを作成するかということです。
さて、私はストレスを感じました。-大きな時間。
私はきちんとした粘着性のあるフッターを探して何年もの間ネット上でググった。さて、何を推測します。私が見つけたすべての粘着性のあるフッターはあなたに使用するように言ったmin-height:100%
。これは、ラッパーを醜くし、コンテンツがウィンドウ自体よりも小さい場合に動的な高さを削除するため、煩わしいものでした。
ですから、問題は、ラッパーを動的に保ちながら、どのようにしてスティッキーフッターを作成するかということです。
これは、コンテンツがウィンドウよりも小さい場合にウィンドウの下部にとどまる粘着性のあるフッターを作成できる、ちょっとしたjavascriptのトリックです。次に、コンテンツがウィンドウよりも高い場合、フッターがページの下部に配置されます。
setInterval(function(){
var wrapper_height = $('#wrapper').height();
var window_height = $(window).height();
if(wrapper_height<window_height){
$('footer').css({position:'absolute', bottom: '0px'});
}else if(wrapper_height>window_height){
alert('switched to mode 2');
$('footer').css({position:'relative', bottom: '0px'});
}
},10);
$('#wrapper').click(function(){
$('#wrapper').append('<p>BLAH</p>');
})
</ p>
これがお役に立てば幸いです。
ラッパーを動的に保つことによって-フッターではなく、ページ/メインコンテンツのラッパーを意味すると思いますか?フッターの高さは動的である必要がありますか、それともページ全体の高さである必要がありますか?
フッターが固定の高さであるが、メインコンテンツラッパーが異なる可能性がある場合、これは優れたリソースです:http: //ryanfait.com/resources/footer-stick-to-bottom-of-page/