当div的内容发生变化时，如何自动调整div的大小？

目前，我在这个DIV上有一个以页面为中心的注册表单。 DIV的内容来自ascx页面。 这很好地完成了。 现在，如果用户尝试填写不唯一的名称，则会在username字段旁边添加一些错误消息。 这打破了DIV的布局，因为现在的内容比以前更宽。 所以我用Google搜索了这个，但我找不到解决方案。

任何人都可以帮我找到一个很好的方法（伪HTML / js）：

  
  function resizeToNewSize() { $("#myCenteredDiv").animateToSize($("#myCenteredDiv").contentWidth, $("#myCenteredDiv").contentHeight); }  

我正在寻找“onChangeContents”方法（和/或事件）和“div.contentWidth”属性。

非常感谢帮助我！

更新：试图更清楚地解释问题

假设我有这个DIV：

 
 
 Enter your name:    
  

让我们说我有这个jQuery片段：

 $(document).ready(function() { $("#txtYourName").live("blur", function() { if (validateInput($("#txtYourName").val())) { $("#errorYourName").html(""); // entry 1 } else { // entry 2 $("#errorYourName").html("This name is not valid."); } }); }); 

…其中validateInput(value)为有效值返回true 。

现在好了。 SimpleModal插件获取div并将其置于页面的中心，具有一定的宽度和高度，它以某种方式读取div的内容。 因此div不比输入框宽，因为此时跨度是空的。

当输入框失去焦点时，会在范围中输入错误消息。 然后这打破了div的布局。

我可以将代码放入entry 1 ，当错误消息被清除时，将动画调整为大小为div，并将代码放入entry 2 ，将div的大小调整为更大的大小，以便错误消息适合。

但我最喜欢的方法是判断div中的内容是否已经改变，并相应地调整div，动画和自动。

有任何想法吗？ 再次感谢。

Answer 1

我从来没有使用SimpleModal，但是从他们网站上的示例看起来你可以设置容器CSS。 如果要调整高度，请尝试将高度设置为auto

 $("#sample").modal({ containerCss:{ backgroundColor:"#fff", borderColor:"#0063dc", height:450, padding:0, width:830 } }); 

虽然示例没有它，但我认为您需要在引号的高度和宽度之后添加px （例如"450px" ）。

---

好的，这是另一个想法。 也许这太多了，但添加一个隐藏的输入字段：

 
 
 Enter your name:     
  

然后附加在更新错误消息的同时触发的更改事件。

 $(document).ready(function() { $("#txtYourName").live("blur", function() { if (validateInput($("#txtYourName").val())) { $("#errorYourName").html(""); // entry 1 } else { // entry 2 $("#errorYourName").html("This name is not valid."); $("#updated").trigger('change'); } }); $("#updated").change(function(){ // resize the modal window & reposition it }) }); 

这是未经测试的，它可能会过分，但我没有在SimpleModal中看到更新function。

---

更新 ：对不起，我发现直播活动不支持模糊。 所以我做了一些进一步的测试，并提出了一个工作演示。 我将它发布在这个pastebin中 （忽略底部包含的simpleModal代码）。 这是基本代码

CSS

 #myDiv { line-Height: 25px; } #simplemodal-container { background-color:#444; border:8px solid #777; padding: 12px; } .simplemodal-wrap { overflow: hidden !important; } .error { color: #f00; display: none; } input { float: right; } 

HTML

 
 
 What is your name: 
 
This name isn't Arthur.
 What is your quest: 
 
This quest must be for the Grail.
 What is your favorite color: 
 
Sorry, you must like red or blue.
 What is the air speed velocity of an unladen swallow:
 Type:  African European  
 
This guess stinks.
 
  
  

脚本

 $(document).ready(function(){ $("#myDiv").modal({ containerCss:{ height: '165px', width: '350px' } }) $("#txtYourName").focus(); addValidate('#txtYourName','Arthur','#errorYourName'); addValidate('#txtYourQuest','Grail|grail','#errorYourQuest'); addValidate('#txtYourColor','red|blue','#errorYourColor'); addValidate('#txtYourGuess','11|24','#errorYourGuess'); // See http://www.style.org/unladenswallow/ ;) $("#myDiv form").change(function() { // This is called if there are any changes to the form... added here for an example // alert('Form change detected'); }); }) function addValidate(el,valid,err){ $(el).blur(function() { if ( $(el).val().length > 0 && !$(el).val().match(valid) ) { if ($(err).is(':hidden')) { $('#simplemodal-container').animate({'height': ($('#simplemodal-container').height() + 25) + 'px'},1000); $(err).slideDown(1000); } } else { // entry 2 if ($(err).is(':visible')) { $('#simplemodal-container').animate({'height': ($('#simplemodal-container').height() - 25) + 'px'},1000); $(err).slideUp(1000); } } }); } 

Answer 2

jQuery的：

 $(document).ready(function() { var originalFontSize = 12; var sectionWidth = $('#sidebar').width(); $('#sidebar span').each(function(){ var spanWidth = $(this).width(); var newFontSize = (sectionWidth/spanWidth) * originalFontSize; $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"}); }); });  

DIV：

 
 fits the width of the parent
 Hello
 my
 name
 is
 john
 1
 23
 456
 12345678910
 the font size in the span adjusts to the width
  

预览http://jbdes.net/dev/js/fontsize.html

Answer 3

老式桌子（仍然）非常适合居中，快速，流畅且无代码。

  CSS: HTML,BODY {height:100%; width:100%}
 
 your Content