div 自动高度对于内容来说太小

Question

我遇到的情况是，我有一个通常在 jsp 中显示的报告，现在我有一个打印，其中需要多次包含所述页面的多个实例，所以这是一个组合报告之类的事情。为了避免使用相同的键向模型添加值时出现的问题，我们想出了这种包含 jsp 的方法。

<c:forEach var="prodTest" items="${listProductionTest}">
<div style="display:block" id="chargeReport${prodTest.report.recId}">
</div>
<script type="text/javascript">
    $.get("ChargeReportContent?recId=${prodTest.report.recId}", function( data ) {
        $("#chargeReport${prodTest.report.recId}").html(data);
    });
</script>

ChargeReportContent 是一个返回带有值的 jsp 的端点。它正确检索数据，但是 div 高度完全错误，导致两个报告重叠。看来自动高度给了自己足够的高度，只包含报告的第一部分。

显示块似乎不起作用。这些报告的大小应约为 1500 像素，但将高度设置为固定值并不是真正的选择，因为大小可能会根据报告或更新而变化。

请帮忙！

Answer 1

div 中元素的位置是什么？
确保它们不是固定的、绝对的或浮动设置的。
div默认设置为display block，你可以尝试将其设置为flex

Answer 2

有同事提出这是因为html是通过编程方式填充的，尺寸不准确。我们从来没有找到一个干净的方法来解决这个问题，但我们想出的最好的办法是自己计算所需的高度，然后设置它。例如
标题始终为 92px，配方始终为 256px，Reportlines 大小= 42+(21(materials+1))，注释部分如果没有注释则为 23px，如果有注释则为 42 等。
如果在 JSP 中我们无法轻松检索多个警报，我们会创建一个不可见的输入来存储值，并由模型添加

<input id="alarmCounter${report.recId}" style="display: none" value="${alarmCount}"></input>

，然后我们检索 val 以在计算中使用它。
找到总数后，我们只需将其设置在获取包含页面的 get 中
$.get("ChargeReport?recId=${prodTest.report.recId}", function( data ) {

        $("#chargeReport${prodTest.report.recId}").html(data);
        let alarmCount = 0;
        alarmCount =parseInt($('#alarmCounter${prodTest.report.recId}').val());
        var chartsize = 400*($('#chartExists${prodTest.report.recId}').val() == 'true' ? 1 : 0)
        var pixelsNeeded= 92 + 256 + 205
        + 42+ 21*(${fn:length(prodTest.report.reportLines)}+1)
        + 21*(alarmCount+2) 
        +19+24*${!empty prodTest.report.comment}
        + chartsize + 51 
        +50;

        $('#chargeReport${prodTest.report.recId}').css("height",pixelsNeeded+"px");