当改变html文本框的高度时，页面的其余部分会变得拥挤
我的表单中的某些字段可以是多行的，例如“评论”字段。 在注释完全正确后注意字段上的间距。
因为用户可以输入多行文本，所以我在页面中添加了以下代码，以便它可以适当调整字段的大小。 基本上只需处理文本框上的“OnKeyUp”事件来调整它的大小，使其显示高度等于其滚动高度。
function AutoExpandTextbox(txtbox) {
txtbox.style.height = "1px";
txtbox.style.height = (4 + txtbox.scrollHeight) + "px";
ResizeFormGroup(txtbox);
}
....
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="commentsTextBox" CssClass="col-lg-2 col-md-2 col-sm-3 col-xs-12 control-label">Comments</asp:Label>
<div class="col-lg-10 col-md-10 col-sm-9 col-xs-12">
<asp:TextBox ID="commentsTextBox" onkeyup="javascript: AutoExpandTextbox(this);" class="form-control input-sm input-full-width" runat="server" MaxLength="255" TextMode="MultiLine" />
但即使该字段按照我想要的方式调整大小，然后页面上的字段也会挤在一起。 这就像浏览器在当前更改后不保留边距和填充...
由于这种拥挤，我在该事件监听器中添加了行，不仅导致文本框的大小调整，而且还导致了包含它的表单组。 在IE上，修复了间距问题。 但是在Chrome上，在调整大小的领域之后，形式依然如此拥挤。
问题：有没有办法告诉Bootstrap或DOM来适当地更新页面的其余部分？ 我错过了什么吗？
更新 - 我已经创建了一个笔来向你展示这一点。 我尽可能少的我的CSS（基本上是CSS的asp.net给了我），HTML和JavaScript，但仍然重复的问题。 当你进入这支笔时，开始在评论区域输入内容，看看这些区域的垂直间距会发生什么变化。 确保您在该评论字段中输入了多行文字。
这是一个简单的“clearfix”问题，因为你已经浮动了保存表单域的列。 如果不清除这些字段上的浮点数，父行将不会考虑浮动子元素的高度。
有很多方法可以实现clearfix。 通过使用引导代码，您可以简单地将.clearfix类添加到具有浮动子级的父行，以利用引导程序clearfix方法。 或者你可以使用overflow: auto; 在这些行上，或者以另一种方式实现您自己的clearfix类。
function AutoExpandTextbox(txtbox) {
txtbox.style.height = "1px";
txtbox.style.height = (4 + txtbox.scrollHeight) + "px";
}.col-sm-2, .col-sm-10 {
float: left;
}
.form-group {
margin-bottom: 25px;
padding-bottom:25px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div >
<div class="form-group clearfix">
<label class="control-label col-sm-2" for="comments">Comments:</label>
<div class="col-sm-10">
<textarea class="form-control" id="comments" onkeyup="AutoExpandTextbox(this)"></textarea>
</div>
</div>
<div class="form-group clearfix">
<label class="control-label col-sm-2" for="field1">Field1:</label>
<div class="col-sm-10">
<input class="form-control" id="field1" />
</div>
</div>
<div class="form-group clearfix">
<label class="control-label col-sm-2" for="field2">Field2:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="field2">
</div>
</div>
<div class="form-group clearfix">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</form>上一篇: When changing height of html textbox, rest of page gets crowded