jquery 根据浏览器调整div宽度

xpcnnkqh  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(133)

我是jQuery的新手。下面是我的html结构,其中的内容和网格有宽度为100%的css。这在IE8中工作得很好,而在Firefox和Google Chrome中,div宽度跨越,必须向右滚动。

<div id="content">
     <div id="grid">
          <table id="test">
          </table>
     </div>
</div>

字符串
然而,我正在使用下面的jquery函数来动态调整div宽度,基于FF和Chrome浏览器。但它不起作用。有人能帮帮我吗?

$(window).resize(function () {
     var windowWidth = $(window).width();
     $('content').css({'width':windowWidth });
});
.resize();


css post:

#content{
     padding-right: 0px; 
     padding-left: 0px; 
     padding-bottom: 0px; 
     margin: 3px 28px 2px 14px; 
     width: 100%; 
     padding-top: 0px;
     height: 70%;
}
#grid {
    width: 100%;
    /* following rules for illustration */
    background-color: blue;
    min-height: 100px;
    padding-right: 0px; 
    padding-left: 0px;  
    padding-bottom: 0px;
    margin: 0px 0px 10px; 
    padding-top: 0px; 
}

gg58donl

gg58donl1#

对于你正在做的事情,你不应该使用JavaScript,你可以使用width: 100%;或者更好的width: auto;
也就是说,如果你想使用jquery动态设置像素宽度,你需要添加后缀px
这意味着:

$('content').css({'width':windowWidth+'px' });

字符串
我只是不认为这将解决您最初使用width:100%width:auto;时出现滚动条的问题
我认为您需要执行以下操作:
使用CSS删除html和body的填充和边距,如下所示:

html, body {
    margin:0;
    padding:0;
}


或jquery

$("body").css("margin","0")
         .css("padding","0");
$("html").css("margin","0")
         .css("padding","0");

更新

现在你发布了你的CSS,只需将其更改为以下内容:

#content{
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 3px 28px 2px 14px; 
    WIDTH: auto;  /* changed this line */
    PADDING-TOP: 0px; HEIGHT: 70%;
}
#grid {
    width: auto; /* and changed this line aswell */
    background-color: blue;
    min-height: 100px;
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px;  
    PADDING-BOTTOM: 0px;
    MARGIN: 0px 0px 10px; 
    PADDING-TOP: 0px; 
}

相关问题