0

ページの垂直方向と水平方向の中央にdivがあります。ただし、このdiv idが大きい場合、画面を中央に配置できず、切り取られます。そこで、divがドキュメントのマージン0autoへの変更よりも大きいかどうかを検出しようとしました。しかし、私はそれを行う方法がわかりません。idプロパティを削除して、クラス「onTop」プロパティを与えることは可能ですか？

私はここでプレイすることができます：http：//jsfiddle.net/c9unU/

jQuery：

$(function(){      
    var documentHeight = $(document).height();
    var contenttHeight = $("#content").height();

    if(documentHeight < contenttHeight ){
        /* give it the class onTop */
    }else{
        /* give it the id content */
    }   
})

HTML：

<div id="background">
    <div id="content"> some text inside</div>
</div>

CSS：

body {margin: 0;padding: 0;color:#fff; font-size:40px;}

#background {
    position: absolute;
    width:100%;
    height:100%;
    border: 0px;
    background-color:blue;
}

.onTop {
    position: relative;
    top: 0; 
    left: 0;
    margin: 0 auto;
    background-color:green;
    width:300px;
    height:600px;
    border:0px;
  }

#content {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-300px;
    margin-left:-150px;
    background-color: red;
    width:300px;
    height:600px;
    border:0px;
}
4

3 に答える 3

1

IDCSSまたはクラスCSSルールを使用する選択肢しかないかのように状況に近づいています。両方を組み合わせるのは非常に簡単です。

#content {
   /* properties here*/
}

/* CSS for #content when class onTop is added to it*/
#content.onTop {
    position: relative;
    top: 0; 
    left: 0;
    margin: 0 auto;
    background-color:green;
    width:300px;
    height:600px;
    border:0px;
  }

JS

$(function(){      
    var documentHeight = $(document).height();
    var contenttHeight = $("#content").height();
     $('#content').toggleClass('onTop', documentHeight < contenttHeight)

})

の2番目の引数toggleClass()は、クラスの追加または削除を示すブール値です。

于 2013-01-01T16:23:25.730 に答える
0

シンプル：デフォルトでIDを指定し、クラスを追加および削除します。クラスcssがデフォルトのcssの後にあることを確認してください。シンプルにしてください。

CSS：

#content.onTop {
    position: relative;
    top: 0; 
    left: 0;
    margin: 0 auto;
    background-color:green;
    width:300px;
    height:600px;
    border:0px;
  }

JQuery：

if(documentHeight < contenttHeight ){
        /* give it the class onTop */$('#content').addClass('onTop');
    }else{
        /* remove class ontop */
    }

そもそもクラスが存在しないため、実際にクラスを削除する必要はありません。ただし、ウィンドウのサイズ変更時に画面を調整する方がよいでしょう。

于 2013-01-01T16:24:27.850 に答える
0

これを試して：

$(function(){      
    var documentHeight = $(document).height();
    var contenttHeight = $("#content").height();

    if(documentHeight < contenttHeight ){
        $('#content').removeAttr('id').addClass('onTop');
    }else{
        $('.onTop').removeClass().attr('id', 'content');
    }   
})
于 2013-01-01T16:18:14.277 に答える