如何在 <div> 中使用 flexigrid 调整 <div> 元素的大小答案

【问题标题】：How can i resize <div> Element with flexigrid in <div>如何在 <div> 中使用 flexigrid 调整 <div> 元素的大小
【发布时间】：2014-08-27 04:13:20
【问题描述】：

html 数据

<div id="flexdiv" class="resizable-ui">
<div> etc layer .. </div>

<table class='flexme1'>
...
</table>

</div>

jquery 数据

    var width = $(div).width(),
        height = $(div).height()-100;

     $('.flexme1').flexigrid({
         width: width,
         height: height,
         resizable: false,
         singleSelect: true});



$(div).resize(function() {
          var width = $(div).width(),
              height = $(div).height() -20;
          $('.flexme1').flexigrid({height:height,width:width,striped:false});
        });

它不工作我不知道这是什么问题帮我看角度！！！！！！！！！！！！！！！拜托..

【问题讨论】：

您到底想在这里实现什么？有两个 div 元素，您要调整哪一个以及何时调整？？
这里的一个明显问题是您使用的 div 变量没有任何内容，因此代码不会比该行更进一步！所以你应该在一开始写这个： var div = document.getElementById("flexdiv");我检查了，现在你会得到宽度：501 和高度 40！当你从高度 sibtract 100 它给出 -60
我想调整“
”元素的大小这也改变了大小“”应该改变。

所以你想调整flexdiv的大小，然后将table flexme1的高度设置为小于flexdiv的高度20？

好的等等..我会修好它

标签： javascript jquery html resize flextable

【解决方案1】：

所以我已经编写了可以调整 div 和 table 元素大小的代码：

<div id="flexdiv" class="resizable-ui" style="border: 1px solid">
<div> etc layer .. </div>

<table id="table1" class='flexme1' style="border: 2px dotted; width:200px; height:200px">
</table>

</div>

Javascript：

var div = document.getElementById("flexdiv");
var width = $(div).width(),
height = $(div).height();

alert("Div-OldHeight: "+ height);
alert("Div-OldWidth: "+ width);
var newHeight = "600px";
var newWidth = "400px";
div.style.height = newHeight;
div.style.width = newWidth;
alert("Div-NewHeight: "+ newHeight);
alert("Div-NewWidth: "+ newWidth);

var table = document.getElementById("table1");
width = $(table).width(),
height = $(table).height();

alert("Table-OldHeight: "+ height);
alert("Table-OldWidth: "+ width);
var newHeight = "100px";
var newWidth = "100px";
table.style.height = newHeight;
table.style.width = newWidth;
alert("Table-NewHeight: "+ newHeight);
alert("Table-NewWidth: "+ newWidth);

我已将新的宽度和高度放在变量中，您可以根据需要更改它们，希望您能大致了解如何操作。您还可以根据 div 的大小制作表格，基本核心将保持与我提供给您的相同..

See the demo here

【讨论】：