使用JQuery，如何强制执行可调整大小的div来形成适合其子控件？

Question

附图中有一些关于我如何使这个可调整大小的div表现出来的信息。

基本上，我希望div可以垂直或水平设置控件。

那就是说，我在div中动态生成了一组控件，在这种情况下：

fig.autofmt_xdate()
import matplotlib.dates as mdates
ax.fmt_xdata = mdates.DateFormatter('%d-%m-%Y %H:%M')
datetimefmt = mdates.DateFormatter("%d-%m-%Y %H:%M")
ax.xaxis.set_major_formatter(datetimefmt)

但它可以是任意数量的按钮，文本框，组合框等。

这是我迄今为止在JSFiddle

中对JQuery的所作所为

如果你和小提琴一起玩，你会发现在高度调整大小时，div并不符合它的孩子。

我的工作方式并不奏效，希望得到一些帮助/见解。谢谢。

Answer 1

这个片段试图在它们出现的任何配置中拥抱子div的高度，设置最小宽度，并且有一个函数来计算最大宽度（这个函数已被注释掉，因为它有效地在它上面锁定可调整性 - 我不确定你想要什么，但你可以取消注释看。）

请注意，隐藏按钮与模拟新内容的方式不同，因为maxheight函数会查找最后一个child-div的高度，如果它具有display:none，则它将假定最后一个子节点的底部-div为零。因此，“显示”按钮已经过调整以附加新按钮。

var block = $("#block");
var content = $("#divContent")
var cons = content.children().length * 20;
var numberOfControls = content.children().length;
var controlheight = 20;
var padding = 5;
var totalwidth = 0;
var totalheight = 0;
var minwid = 0;
var maxwid = 0;
var minhi = 0;
var maxhi = 0;
var arrwid = [];

block.ready(function(e) {
  //--- initialize values
  totalwidth = 0;

  //--- Find the sum of lengths of controls to set the maximum width
  maxwid = getMaxWidth() + padding;

  //--- Find the control with the longest length for minimum width
  minwid = getMinWidth() + padding;

  //--- Find number of controls to set the height
  maxhi = getMaxHeight();

  //--- Find minHeight
  minhi = controlheight;
});

block.draggable();

function res() {
  block.resizable({
    maxWidth: maxwid,
    minWidth: minwid,
    maxHeight: maxhi,
    minHeight: minhi,
    resize: function(e) {


      block.height(getMaxHeight());
      //block.width(totalwidth);

      //content.width(totalwidth + 400);
      //alert(totalwidth);
    }
  });
}
$(window).load(function() {
  res(); // defined for later resetting
});

function getMaxWidth() {
  content.children().each(function(i, val) {
    totalwidth = totalwidth + $("#" + val.id).width() + padding;
  });
  return totalwidth;
}

/*
function getMaxWidth() {
    var tempWidth = [];
    content.children().each(function(i, val){
        tempWidth.push($(this).outerWidth());          
    });
    totalwidth = Math.max.apply(null, tempWidth);
    return totalwidth;
}  // this function will get you the maximum current width, but combined with maxheight will effectively lock your resizer.
*/

function getMinWidth() {
  var arrwid1 = [];
  content.children().each(function(i, val) {
    arrwid1.push($(this).width());
  });
  minwid = Number(Math.max.apply(null, arrwid1)) + padding;
  $('#w').text('minwidth =' + minwid);
  return minwid;
}

function getMaxHeight() {
  var dcon = $('#divContent').children().last(),
    totalwidth = dcon.position().top + dcon.height();
  $('#h').text('height =' + totalwidth);
  return totalwidth;
}

function getMinHeight() {
  return controlheight; //--- Height of a single control.
}

function recalculateDimensions() {
  numberOfControls = content.children().length;
  maxwid = getMaxWidth();
  minwid = getMinWidth();
  maxhi = getMaxHeight();
  minhi = getMinHeight();
}

$('#btnDisplayBTN').click(function() {
  $('#divContent').append('<button class="btnNewBTN">new button!</button>');
  recalculateDimensions();
  res();
});


$('#btnGetHeight').click(function btnGetHeight_Click() {
  alert((numberOfControls + padding) * controlheight);
});

#block {
  border: 1px solid red;
  background-color: red;
  width: 300px;
  padding: 5px
}
#btnDisplayBTN {
  width: 100px;
}
#btnGetHeight {
  width: 100px;
}
.btnNewBTN {
  width: 100px;
}
#divContent {} div {
  width: 100%;
}
#monitor {
  position: fixed;
  bottom: 2em;
}

<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<div id="block">
  <div id="divContent">
    <button id="btnDisplayBTN">Display</button>
    <button id="btnGetHeight" click="btnGetHeight_Click()">Total Height</button>
    <input id="txb" />
  </div>
</div>

<div id='monitor'>
  <div id='h'></div>
  <div id='w'></div>
</div>