0

本当に助けが必要です。

私はこのテストウェブを持っています：www.sfrpsicologia.com/inicio.html

ご覧のとおり、画面中央の緑色のボックスを中央に配置しました。問題は、ウィンドウの高さのサイズを変更すると、このボックスがロゴとフッターの上に表示されることです。そして、私が欲しいのは、常にこのdivがロゴとフッターの高さを尊重することです。このボックスが決して越えないように、上下にマージンが必要です。

何か助けてください？私はjavascriptについてあまり知りません。私はcssスタイルで試しましたが、それは絶対に配置されているので、私はそれを行うことができません。

どうもありがとうございます

4

1 に答える 1

1

この場合、絶対測位は使用しないでください。あなたはjavascriptで貧弱なデザインの問題を解決しようとしていますが、それは良い習慣ではありません。スティッキーフッターアプローチhttp://ryanfait.com/resources/footer-stick-to-bottom-of-page/ を使用し、その手法に基づいてページ構造を考え直します。

OK私はあなたが意味するものを手に入れました。

これを実行します。ただし、サイトでテストできないため、動作することを保証しませんが、障害が発生した場合は、動作するように変更する必要があります。私はあなたがそれに精通しているはずのjQueryを使用しています。

したがって、ステップ1（divを取得）<div id=wrapp>とその高さを取得します

var wrapp = jQuery('#wrapp');
var h = wrapp.outerHeight();

ステップ2（他のいくつかの変数を設定します）

var winH = 0;
var pos = null;
var footerH = 34;
var headerH = 74;

これらの高さは<div id=wrapp>あなたの場合以外の要素であり、多かれ少なかれいくつかあるかもしれません。

var footerH = 34;
var headerH = 74;

<div id=wrapp>アイデアは、画面上のすべての人が上に行くのを止める余地がないときです。

ステップ3（これはすべてウィンドウサイズ変更イベントにバインドされます）：

jQuery(window).resize(function(){

    winH = jQuery(this).height();
    pos = wrapp.position();    
    if(winH  < h + headerH + footerH  )
        wrapp.css({'top' : pos.top});
    else
        wrapp.css({'top' : '50%'});
});

サイズ変更時にウィンドウの高さを更新し、<div id=wrapp>位置オブジェクトも取得します。（配置したすべての高さに応じてスペースがなくなった場合）top位置を現在の一番上の位置 <div id=wrapp>に固定し、それ以外の場合はパーセンテージに戻します。

次に例を示します：http：//jsfiddle.net/F7mrf/44/

ほんの少しの変更でうまくいくはずのアイデアが浮かんだら、計算をして正しい数字を入力するだけです。頑張ってください。

于 2012-08-15T22:09:49.193 に答える