gpt4 book ai didi

jquery - 根据窗口大小调整div

转载 作者:太空宇宙 更新时间:2023-11-03 18:36:05 25 4
gpt4 key购买 nike

我想根据窗口大小调整我的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com