更新

Question

我是jquery的新手。下面是我的html结构，其中内容和网格的css宽度为100％。这在IE8中非常有效，因为在Firefox和谷歌浏览器中，div宽度跨越并且必须向右滚动。

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

但是我使用下面的jquery函数来动态调整div宽度基于浏览器的ff和chrome.but它不起作用。任何人都可以帮助我吗？

$(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; 
}

Answer 1

对于您正在做的事情，您不应该使用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; 
}

根据浏览器调整div宽度

1 个答案:

更新