Question

我想根据窗口大小重新调整div的大小。我有以下代码。

$(window).resize(function() {
    $('#grid1').width('50%'); // <---100% width
    $('#grid1').height('50%'); //<---100% height
});

当我运行它时，滚动条不会出现，并且网格中的表格会被截断。我该怎么办？？这是我的div

<div id="grid1" jsid="grid1" dojoType="dojox.grid.EnhancedGrid"
    query="{ name: '*' }"
    data-dojo-props="plugins:{ pagination:{pageSizes: ['10', '25', '50', '100'],
    description: true, sizeSwitch: true, pageStepper: true, gotoButton: true, position: 'bottom', maxPageStep: 7}}, rowsPerPage:10"
    style="height: 300px; width: 930px;">
</div>
</div>

这是我的DOJO表。

    <script>
      dojo.require("dojox.grid.EnhancedGrid");
      dojo.require("dojox.grid.enhanced.plugins.Pagination");
      dojo.require("dojo.data.ItemFileWriteStore");
      dojo.require("dojox.grid.enhanced.plugins.Filter");
      dojo.require("dojox.data.QueryReadStore");
      dojo.require("dojo.parser"); // scan page for widgets and instantiate them
      var gridLayout = [ 
        {
    name : "S. No.",
    classes : "title",
    width : "70px",
    get : siFormatter,
    filterable : false
}, {
    name : "Site Id",
    classes : "title",
    field : "siteId",
    width : "70px"
}, {
    name : "IP/Phone No.",
    classes : "title",
    field : "devType",
    width : "120px"
}];
</script>

Answer 1

尝试使用media query

的css3

#grid1 {
  height: 300px;
  width: 930px;
}

@media all and (max-width: 699px) and (min-width: 520px) {
  #grid1 {
    height: 150px;
    width: 465px;
  }
}

设置height＆amp; width值作为您的要求。

Answer 2

使用％是一种上帝的习惯..

<!DOCTYPE html>
<html>
<head>
  <meta charset=UTF-8>
  <title>Proportional resizing</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    div {
      position: absolute;
      left: 30%;
      top: 20%;
      width: 40%;
      height: 30%;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div>divthing</div>
</body>
</html>

根据窗口大小重新调整div大小

2 个答案: