使用JQuery，如何实施可调整大小的div以使其适合其子控件？

Question

附件中的图片提供了一些有关如何调整此div大小的信息。

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

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

<style type="text/css">
    button { width: 100px; }
    input { width: 100px; }    
</style>
<div id="block">
    <div id="content">
        <button id="btn1">Button One</button>
        <button id="btn2">Button Two</button>
        <input id="txb1"></input>
        <button id="btn3">Button Three</button>
    </div>
</div>

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

到目前为止，这是我在JSFiddle中对JQuery的了解

如果您使用小提琴演奏，则会发现在调整高度大小时div不符合其子级。

我不喜欢它，但是希望获得帮助/了解。 谢谢。

Answer 1

此代码段尝试拥抱子div的高度，无论它们出现在哪个配置中，都设置了最小宽度，并且有一个计算最大宽度的函数（此函数已被注释掉，尽管因为此函数有效地锁定了可缩放性-我不确定您是否想要，但您可以取消评论）。

请注意，隐藏按钮与模拟新内容的方式不同，因为maxheight函数将查找最后一个子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>