我想根据窗口大小调整我的 div 大小。我有以下代码。
$(window).resize(function() {
$('#grid1').width('50%'); // <---100% width
$('#grid1').height('50%'); //<---100% height
});
当我运行它时，滚动条没有出现并且我在网格中的表格被截断了。我应该怎么办？？这是我的分区
<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>
最佳答案
使用 % 是一个好习惯..
<!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>
关于jquery - 根据窗口大小调整div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18632266/