【问题标题】：Expand div on HTML form在 HTML 表单上展开 div
【发布时间】：2016-02-04 23:49:28
【问题描述】：

我有一个表单，当用户从选择列表中选择一个值时，textrea 宽度减小到 50%，并且 textarea 旁边是一个包含建议的 div（用户可以在用户选择添加按钮）会显示出来。

这是在用户选择显示建议之前我所拥有的可视化：

这是我在使用选择显示建议后的可视化：

我遇到的问题是建议 div 并不总是扩展到完整高度。有时 div 会正确扩展，有时则不会 - 无法弄清楚原因。这是问题的可视化示例：

使用 JQuery，我尝试在选择列表更改时将焦点放在 textarea 上，但这没有任何效果（焦点在 textarea 上，但建议 div 没有扩展到全高）。

我还尝试添加一个 CSS 类值 height: 100%，但这会将建议 div 扩展到完整的可用高度。我不希望在更改选择列表时发生这种情况。

当我实际单击鼠标以关注表单（表单上的任何位置）时，建议 div 会扩展所需的全高，即使我使用或未使用 JQuery 将焦点放在文本区域。很奇怪。

有人对扩展建议 div 有什么建议吗？我找不到搜索 google 或 SO 的解决方案。

编辑 - 按要求添加代码

这里是相关的html代码：

<div id="row_id_voluntary_description" class="form-group  ">
    <label for="id_voluntary_description" class="control-label required">
        Description:
    </label>
    <div class="controls ">
        <span id="row_id_voluntary_description"><textarea cols="40" data-parsley-maxlength="5000" id="id_voluntary_description" maxlength="1000" name="voluntary_description" rows="10" data-parsley-id="1468" data-parsley-required-message="This field is required." data-parsley-required="true" class="kmw-disabled keymanweb-font textAreaSplit"></textarea><span class="parsley-errors-list" id="parsley-id-1468"></span></span>
        <span id="row_icons_id_voluntary_description" style="width: 20px;">
            <i id="id_icon_id_voluntary_description" class="fa fa-lightbulb-o blue_color icon_size26 verticalAlignTop" data-original-title="" title="" style="display: inline-block;"></i>
            <i id="id_icon_reset_id_voluntary_description" class="fa fa-ban blue_color icon_size20 verticalAlignBottom" style="margin-left: -20px; margin-bottom: 5px; display: inline-block;" rel="tooltip" html="true" data-placement="top" title="" data-original-title="Clear"></i>
        </span>
        <span id="row_split_id_voluntary_description" class="textAreaSplitContainer" style="display: inline-block; height: 200px;">


    <div dir="ltr" style="direction: ltr;">

        <div class="suggestions_subHeading margin-bottom-15">Suggestions</div>

        <div id="id_voluntary_suggestion_wrapper_01" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_01" class="margin-bottom-15">[organization]&nbsp;[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_01" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_02" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_02" class="margin-bottom-15">[organization]&nbsp;[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_02" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_03" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_03" class="margin-bottom-15">[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[organization]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_03" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_04" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_04" class="margin-bottom-15">[job title]&nbsp;[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_04" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_05" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_05" class="margin-bottom-15">[job title]&nbsp;[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_05" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_06" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_06" class="margin-bottom-15">[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[job title]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_06" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_07" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_07" class="margin-bottom-15">[organization]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_07" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_08" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_08" class="margin-bottom-15">[organization]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_08" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_09" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_09" class="margin-bottom-15">[organization]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[Present]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_09" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_10" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_10" class="margin-bottom-15">[organization]&nbsp;<br>
[job title]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_10" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_11" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_11" class="margin-bottom-15">[organization]&nbsp;<br>
[job title]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_11" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_12" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_12" class="margin-bottom-15">[job title]&nbsp;<br>
[organization]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_12" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_13" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_13" class="margin-bottom-15">[job title]&nbsp;<br>
[organization]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_13" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_14" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_14" class="margin-bottom-15">[organization]&nbsp;<br>
[location]&nbsp;<br>
[job title]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_14" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

        <div id="id_voluntary_suggestion_wrapper_15" class="suggestion_content_details margin-bottom-15"><span id="id_voluntary_suggestion_15" class="margin-bottom-15">[organization]&nbsp;<br>
[job title]&nbsp;<br>
[location]&nbsp;<br>
[mm/yyyy]&nbsp;–&nbsp;[mm/yyyy]&nbsp;[(X years, X months)]&nbsp;<br>
</span><span class="suggestion_add_button"><button id="id_add_voluntary_suggestion_15" class="btn btn-xs rounded btn-primary" type="button">Add</button></span></div>

    </div>
        </span>
            <p class="help-block">
                1,000 character limit
            </p>  
    </div>
</div>

这里是相关的 CSS：

.textAreaSplit {
    height: 200px;
    max-height: 600px;
    max-width: 50%;
    min-height: 100px;
    min-width: 50%;
    resize: vertical;

    border: 1px dotted red;
}
.textAreaSplitContainer {
    border: 1px solid #d9d9d9;
    display: inline-block;
    height: 200px;
    /*max-height: 600px;*/
    max-width: 45%;
    /*min-height: 100px;*/
    min-width: 45%;
    overflow: scroll;
    overflow-x: hidden;
    padding: 10px;
    resize: none;
    vertical-align: top;
    /*background: #f6f6f6*/
    background: aqua


}

这里是选择列表改变时触发的相关JavaScript/JQuery代码：

function changeDisplayFunction() {

    if ( $('#id_voluntary_suggestion_type').val() == '0' || $('#id_voluntary_display_type').val() == '0' ) {

        // display the text areas as 95% width and hide the related suggestion containers.
        $('#id_voluntary_description').addClass('textArea01');
        $('#id_voluntary_description').removeClass('textAreaSplit');
        $('#id_icon_id_voluntary_description').hide();
        $('#id_icon_reset_id_voluntary_description').hide();
        $('#row_split_id_voluntary_description').hide();

    } else {

        // display the text areas as 50% width with the suggestion container next to it.
        $('#id_voluntary_description').addClass('textAreaSplit');
        $('#id_voluntary_description').removeClass('textArea01');
        $('#id_icon_id_voluntary_description').show();
        $('#id_icon_reset_id_voluntary_description').show();
        $('#row_split_id_voluntary_description').show();

    }

}

【问题讨论】：

请提供您的HTML & CSS
是否包含任何可能影响 DIV 高度的 JavaScript？您可以只编写一些选择 DIV 的内容，并在出现建议框时将高度设置为与 textarea 相同： $('#suggestions').height($('#employer').height());
我猜容器 div 没有设定高度。如果它没有设定高度，height: 100%; 不会做任何事情
@Trix 代码按要求添加。

标签： javascript jquery html css

【解决方案1】：

您的标记存在重大问题。

1

首先，<span> 是一个inline 级别元素，你不应该像divs 那样将block 级别元素放入其中，即使你将其设置为

span{
    display: block;
}

2

您可以改用此标记，以获得更可靠的结构：

.controls{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.cols{
  width: 50%;
}
.cols ul{
  list-style: none;
}
.row_id_voluntary_description{
  padding: 10px;
}
.row_id_voluntary_description textarea{
  width: 100%;
}
.row_split_id_voluntary_description{
  background: aqua;
}

<div class="controls">
  <div class="cols row_id_voluntary_description">
    <textarea rows="5"></textarea>
  </div>
  <div class="cols row_split_id_voluntary_description">
    <ul>
      <li>Some row-wise content goes here</li>
      <li>Some row-wise content goes here</li>
      <li>Some row-wise content goes here</li>
      <li>Some row-wise content goes here</li>
    </ul>
  </div>
</div>

【讨论】：

感谢，这是一个巨大的帮助。

【解决方案2】：

您的标记有点复杂。我没有尝试过所有的东西。我认为您想要实现的目标需要一个限制内容高度的div。您将div 设置为与左侧的div 匹配的高度，然后添加一个可滚动并扩展为100% 的子div。见this fiddle。
您可以尝试通过将height 替换为max-height 或min-height 来微调您想要达到的效果。

所以本质上：

<div class="panelholder">
  <div class="panel">
    Some content
  </div>
  <div class="panel">
    <div class="constrainer">
      <div class="scrollable">
        <!-- scrollable content -->
      </div>
    </div>
  </div>
</div>

使用这个 CSS：

.panelholder { }
.panelholder .panel {
  width: 49%;
  float: left;
  margin: 0;
  padding: 0;
  height: 150px;
  border: 1px solid #fefefe;
}
.panelholder .panel .constrainer {
  height: 150px; // same as above
  overflow: hidden;
}
.panelholder .panel .constrainer .scrollable {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

希望对你有帮助。

【讨论】：