如何防止部分视图在主视图页面上重叠内容答案

【问题标题】：How to keep partial view from overlapping content on main view page如何防止部分视图在主视图页面上重叠内容
【发布时间】：2014-06-11 22:21:24
【问题描述】：

我的视图中有一个按钮，单击该按钮会显示部分视图的内容。每次用户单击按钮时，都会添加局部视图的内容。这是可行的，但是，主视图不会向下倾斜，以便为局部视图中的字段留出空间。因此，在第二次单击后，部分视图中的字段会与主视图的内容重叠。
我尝试在按钮单击上添加一个事件，该事件将换行标记附加到将显示部分视图的 div 中，但这并没有将页面内容向下移动。

如何降低主视图中的内容？

jquery：

$('#btn-add-employment').click(function () {
            var num = parseInt($('#employer-count').val());
            if ((num+1) > 3) {
                $('#employer-limit').text("Limit of 3 employers");
            } else {
                $('#employer-count').val(num + 1);
                $('#employer-limit').empty();
                var id = 0;  //set to 0 because for now, appicant record has not been created yet.
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("AddEmploymentHistory")",
                    data: { ApplicantID: id, RecordNum: (num+1) },
                    success: function(result) {
                        $('#employment-history_' + (num+1)).html(result);
                    }
                });
            }
        });

HTML：

<button class="btn btn-default" type="button" id="btn-add-employment">Add Employer</button>
                <span id="employer-limit"></span>
                <input type="hidden" id="employer-count" value="0" />
                <div id="employment-history_1"></div>
                <div id="employment-history_2"></div>
                <div id="employment-history_3"></div>

【问题讨论】：

我认为问题与您的 css 文件或 AddEmploymentHistory 操作中可能缺少标签有关。检查css中的高度。或可用性，教育等容器位置绝对
AddEmploymentHistory 操作只返回部分视图。我对 css 不是很好——我应该在什么元素上设置高度？
检查
好的，我想我现在有正确的想法。一旦我进一步解决问题，我将发布我的最终解决方案。

标签： jquery html css asp.net-mvc model-view-controller

【解决方案1】：

为了解决这个问题，我修改了 jquery 以找到该部分的当前高度值，然后添加到高度以便为局部视图中的字段腾出更多空间。带有新添加的局部视图的部分的总高度是它的当前高度，加上原始高度。我不保存原始高度，所以必须使用已添加的局部视图数来计算。

$('#btn-add-employment').click(function () {
            var num = parseInt($('#employer-count').val());
            if ((num+1) > 3) {
                $('#employer-limit').text("Limit of 3 employers");
            } else {
                $('#employer-count').val(num + 1);
                $('#employer-limit').empty();
                //adjust height on panel   <<< NEW STUFF
                var newheight = parseInt($('#collapseTwo').css('height').replace("px", "")) / (num + 1) + parseInt($('#collapseTwo').css('height').replace("px", ""));
                $('#collapseTwo').css("height", newheight);

                var id = 0;  //set to 0 because for now, appicant record has not been created yet.
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("AddEmploymentHistory")",
                    data: { ApplicantID: id, RecordNum: (num+1) },
                    success: function(result) {
                        $('#employment-history_' + (num+1)).html(result);
                    }
                });
            }
        });

【讨论】：