jquery 根据浏览器调整div宽度

xpcnnkqh 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(120)

我是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; 
}

型

jquery

来源：https://stackoverflow.com/questions/27925531/resize-div-width-based-on-browsers

1条答案

按热度按时间

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

型

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 根据浏览器调整div宽度

1条答案

更新

相关问题

热门标签

最新问答