0

私は現在、フラッシュベースのレスポンシブサイトであるサイトに取り組んでいます。今、私のクライアントはこのサイトにhtmlフッターを追加したいと思っており、ページが読み込まれるとフッターはドキュメントの非表示領域にあるはずですが、誰かが下にスクロールするとフッターが表示されるようにするように言われました。そして、私のクライアントは、これはどの画面サイズでも機能するという応答性も必要だと私に言いました。どんな体もそれを行う方法を知っていますか？

4

3 に答える 3

1

scrollHeightページがロードされた後に使用できます( .load) divを配置し、パラメーターの値としてabsolute使用します。これは jQuery を使用して行われますが、純粋な JavaScript を使用して同じ結果を得ることができます。例えば.scrollHeighttop

 function getheight(){
    var myheight = document.body.scrollHeight;
 }
 $(document).load(getheight(); #mydiv.css('top', myheight));

CSS では % 値を使用してリキッド ボックスを取得します。

#mydiv{
  position: absolute;
  width: 90%;
}
于 2012-12-15T06:18:40.383 に答える
1

ブラウザ間の互換性についてはテストしていませんが、Firefox では動作します。これは概念実証にすぎません。すべてを壊さずに既存のサイトを変更できるかどうかはわかりませんが、少なくとも不可能ではありません。(IE の場合: 標準モードにするには、おそらく doctype 宣言を追加する必要があります)。

フィドル: http://jsfiddle.net/QkX32/

HTML:

<body>
     <div id="wrapper">
         <div id="mainPage"></div>
         <div id="footer"></div>
     </div>                
</body>

CSS:

body{
    margin:0;
    padding:0;
}   

#mainPage{
    background-color:red;
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right:0;    
}

#footer{
    background-color: blue;
    height: 20px;
    position: absolute;
    bottom: -20px;  
    width: 100%;    
}

#wrapper{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
于 2012-12-15T06:17:50.600 に答える
0

(ドキュメント - フッター) がウィンドウよりも小さい (つまり、フッターの少なくとも一部が表示されている) かどうかをテストする必要があります。そうであれば、フッターをウィンドウの下に絶対に配置します。

if (($(document).height()-$("footer").height())<$(window).height()){
$("footer").css({
"position":"absolute",
"top":$(window).height();
});
}
于 2012-12-15T06:21:58.147 に答える