2016-10-27 5 views
1

私の主な目的は、一番下の位置にあるフッターを配置することです。コンテンツの高さが画面の高さを超えた場合、フッタのコードが正常に動作していますが、コンテンツの少ないページが到着すると、フッターと画面の下部の間に大きなギャップがあります。だから私は動的にコンテンツの高さを取得し、その後、それを配置しています。動的コンテンツを読み込んだ後に関数を呼び出す

$(window).on('load', function() { 
    console.log(window.innerHeight); 
    console.log($(".content").height()); 
    alert("hi"); 

    if((window.innerHeight - $(".content").height()) < 70) $("footer").css({"position": "absolute", "top": window.innerHeight-90}); 
}); 

た場合は、ページがロードされた後、それは完璧に動作しますが、コードに置かれたとき、$(".content").height()が一定値を与えているGoogleのクロームコンソールでこのコードを使用しています。

答えて

2

JSではこれを行う必要はありません。

フレックスボックスを使用してCSSでこれを行うことができ、最小高さを常にvhのビューポートに塗りつぶすことができます。

.Site { 
 
    margin: 0; 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
.Site-content { 
 
    flex: 1; 
 
} 
 

 
header { background-color: lime; } 
 

 
footer { background-color: red; }
<body class="Site"> 
 
    <header>header content</header> 
 
    <main class="Site-content">site content</main> 
 
    <footer>footer content</footer> 
 
</body>

関連する問題