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 是 returns jsp 具有值的端点。它可以正确检索数据，但是 div 高度完全错误，导致两个报告重叠。 auto height 似乎给了自己足够的高度来只包含报告的第一部分。

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

请帮忙！

Answer 1

div中元素的位置是什么？确保它们不是固定的、绝对的或浮动设置的。默认情况下，div 设置为显示块，您可以尝试将其设置为 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(数据){

        $("#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");

div 内容的自动高度太小

div automatic height is too small for content

html

css

jquery

spring

jsp