0

我在页面中有一个垂直和水平居中的 div。但是当这个 div id 大于屏幕不能居中并被切割。所以我试图检测div是否大于文档更改为margin 0 auto。但我不知道该怎么做。是否可以删除 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

您正在接近这种情况，就好像您只能选择使用 ID CSS或class 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)

})

第二个参数toggleClass()是一个布尔值，表示添加或删除类

于 2013-01-01T16:23:25.730 回答
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 回答
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;
  }

查询：

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

您实际上不需要删除类，因为它首先不会存在。但是，如果您在窗口调整大小时调整屏幕会更好。

于 2013-01-01T16:24:27.850 回答