当 div 的内容发生更改时，如何自动调整 div 的大小以适应其内容的大小？

Question

目前，我有这个 DIV，其中有一个注册表单位于页面中央。 DIV 的内容来自 ascx 页面。这做得很好。 现在，如果用户尝试填写不唯一的名称，某些 jQuery 会在用户名字段旁边添加一条错误消息。这破坏了 DIV 的布局，因为现在的内容比以前更宽。 所以我用谷歌搜索了这个问题，但找不到解决方案。

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

<div id="myCenteredDiv" onChangeContents="resizeToNewSize()">
  <!-- div contents -->
</div>

<script type="text/javascript">
  function resizeToNewSize() {
    $("#myCenteredDiv").animateToSize($("#myCenteredDiv").contentWidth, 
      $("#myCenteredDiv").contentHeight);
  }
</script>

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

非常感谢您帮助我！

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

假设我有这个 DIV：

<div id="myDiv">
  <form ...>
    Enter your name: <input id="txtYourName" type="text" name="YourName" value="" />
    <span id="errorYourName"></span>
    <input type="submit" ... />
  </form>
</div>

假设我有这个 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) 返回 < code>true 为有效值。

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

当输入框失去焦点时，将在跨度中放入一条错误消息。这会破坏 div 的布局。

我可以将代码放入 entry 1 中，当错误消息被清除时，通过动画将 div 大小调整回某个大小，并将代码放入 entry 2 中，将 div 大小调整为更大的尺寸，以便错误消息能够容纳。

但我最想要的是一种方法来判断 div 中的内容是否已更改，并相应地以动画方式自动适应 div。

有什么想法吗？再次感谢。

Answer 1

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"});

});

});

</script>

div：

<div id="sidebar">

<span>fits the width of the parent</span><br />

<span>Hello</span><br />

<span>my</span><br />

<span>name</span><br />

<span>is</span><br />

<span>john</span><br />

<span>1</span><br />

<span>23</span><br />

<span>456</span><br />

<span>12345678910</span><br />

<span>the font size in the span adjusts to the width</span><br />

</id>

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

Answer 2

我从未使用过 SimpleModal，但从他们网站上的示例来看，您似乎可以设置容器 CSS。如果您希望调整高度，请尝试将高度设置为 auto

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

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

---

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

<div id="myDiv">
  <form ...>
    Enter your name: <input id="txtYourName" type="text" name="YourName" value="" />
    <span id="errorYourName"></span>
    <input type="submit" ... />
    <input id="updated" type="hidden" />
  </form>
</div>

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

$(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 中没有看到更新功能。

---

更新：抱歉，我发现现场活动不支持模糊。所以我做了一些进一步的测试并提出了一个可行的演示。我将其发布在此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

<div id="myDiv">
  <form>
    What is your name: <input id="txtYourName" type="text" name="YourName" value="" /><br>
    <div id="errorYourName" class="error">This name isn't Arthur.</div>

    What is your quest: <input id="txtYourQuest" type="text" name="YourQuest" value="" /><br>
    <div id="errorYourQuest" class="error">This quest must be for the Grail.</div>

    What is your favorite color: <input id="txtYourColor" type="text" name="YourColor" value="" /><br>
    <div id="errorYourColor" class="error">Sorry, you must like red or blue.</div>

    What is the air speed velocity of an unladen swallow:<br>
    Type:
    <select>
     <option>African</option>
     <option>European</option>
    </select>
    <input id="txtYourGuess" type="text" name="YourGuess" value="" /><br>
    <div id="errorYourGuess" class="error">This guess stinks.</div>
    <hr>
    <input id="submitMe" type="submit" />
  </form>
</div>

脚本的

$(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 3

老式表格（仍然）非常擅长将事物居中，快速、流畅且无需代码。

<table width=100% height=100%><tr><td align=center valign=center>
    <table><tr><td style="yourStyle">
        your Content
    </td></tr></table>
</td></tr></tabĺe>

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