javascript - 根据浏览器调整 div 宽度

Question

我是 jquery 的新手。下面是我的 html 结构，其中内容和网格中的 css 宽度为 100%。这在 IE8 中完美运行，而在 Firefox 和谷歌浏览器中，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; 时出现滚动条的问题

我认为您需要执行以下操作:

使用 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; 
}