根據瀏覽器調整div寬度

Question

我是jquery新手。 下面是我的html結構，其中在content和grid中，css的寬度為100％。 這在IE8中效果很好，就像在Firefox和google chrome中一樣，div寬度跨度很大，必須向右滾動。

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

但是我正在使用下面的jQuery函數來基於瀏覽器為ff和chrome動態調整div寬度的大小，但是它不起作用。 誰能幫我？

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

CSS帖子：

#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;時出現滾動條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; 
}