将外部 div 的最小高度和宽度限制为内部 div 的大小答案

【问题标题】：Constraing minimum height and width of outer div to the size of inner div将外部 div 的最小高度和宽度限制为内部 div 的大小
【发布时间】：2013-05-08 09:45:05
【问题描述】：

我在一个 div 中有一个 div。

外部 div 是可拖动的（jQuery），内部 div 是可调整大小的（jQuery）。

内部 div 中有一个跨度，其中填充了文本。

如何使外部 div 的高度和宽度永远不会小于其内容的高度和宽度？

目前我可以将外部 div 的大小调整为更小，当外部 div 有边框时，这是一个问题，因为文本溢出外部 div。

提前感谢您的帮助

【问题讨论】：

如果你提供 jsfiddie 源码就很容易了。
"resizable(jQuery)" 所以你使用的是 jquery ui resizable 插件？

标签： jquery css html

【解决方案1】：

试试这个，WithIn 调整大小事件， 1）获取内部div的宽度。和， 2) 将外部 div 的最小宽度应用为 (innerdiv + 4) ..

所以，每当你调整大小时，resize 事件都会触发，所以，你需要获取 innerdiv 的宽度并将它的 outerdiv "min-width" 设置为略高于 innerdiv..

希望这会有所帮助..

.bind('resize', function(){
      var outer_width = parseInt($('.innerdiv').width() + 4);
         $('.outerwidth').width(outer_width);
   });

【讨论】：

【解决方案2】：

给出永远不会变小的 div 的最小高度和最小宽度。对于确切的答案，您可以发布完整的 html 代码。

【讨论】：

该代码是 jquery javascript、html、css、php 和 sql 的混合体，因此很难在此处剪切并作为可查看的横截面发布。我只是在寻找一些可以将外部 div 限制为其内容的宽度和高度的 css 或 javascript
@BarryWatts 修复最小高度和最小宽度后。你能把尺寸调小吗？？

【解决方案3】：

对内部 div 应用一些 max-height 和 max-width。

如果你的外部 div 的高度为 300 像素，宽度为 300 像素：

内部 div css

max-height:300px;
max-width:300px;

【讨论】：

内部 div 可以使用 jQuery 调整大小，因此永远不会确定最大高度
@Barry Watts 所以建立一个最大的调整大小，然后这样做
我希望用户能够将内部 div 调整为他们想要的任何大小，因此 max-height 不是一个选项

【解决方案4】：

如果您实际使用的是 jQuery UI Resizable 插件，您可以使用its own option parameters：

$('.wrapper').resizable({
    minHeight: function() {
        $(this).contents().height();
    }
    ,minWidth: function() {
        $(this).contents().width();
    }
});

【讨论】：

【解决方案5】：

从你的每个答案中提取一点，这就是我解决它的方法。

var spanminwidth=$('#span'+i).width();
spanminwidth=+spanminwidth+4;
$("#div"+i).css('min-width',spanminwidth);

var spanminheight=$('#span'+i).height();
spanminheight=+spanminheight+4;
$("#div"+i).css('min-height',spanminheight);

感谢大家的帮助

【讨论】：