Question

现在有一张桌子，它的内容有所不同，在其他桌子中，桌子的高度可能会根据内容的数量而有所不同。

内容是从数据库派生的，并在表中显示为行。

内容将被打印出来，但是我们希望表格填满整个页面，因此我们尝试添加一个空行，并且该行应延伸到页面底部。

但是该桌子是根据FreeMarker模板设计的，我们不知道如何将桌子的高度扩展到底部。

似乎JavaScript在FreeMarker上不起作用？有人可以给我指导吗？

谢谢。

代码如下：

<!-- ITHeight is designed for the expended row -->
<#assign ITHeight = 0 >
<table style="margin-top: 0px;">
  <!-- start items -->
  <#list record.item as item>
  <tr>
     <td>${item_index+1}</td>
     <td>${item.name}</td>
  </tr>
  <!-- Almost every 40 characters, the words are wrapped to the second line in the column -->
  <#assign ITHeight = ITHeight + (item.description?length / 40 )?round + 1>
  </#list>

  <!-- Calculate the height of the expended row, but it needed to be rectified -->
  <#if ITHeight gt 50>
     <#assign ITHeight = 540 - 9 * ((ITHeight - 50) % 60)>
  <#else>
     <#assign ITHeight = 450 - 9 * ITHeight>  
  </#if>
  <!-- Add the extended row --> 
  <tr style="height:${ITHeight}px">
     <td>&nbsp;</td>
     <td>&nbsp;</td> 
  </tr>
</table>

JavaScript代码将使用DOM方法检测表的高度。如下：

<script>
var width = document.getElementById('foo').offsetWidth;
  ...
</script>

但是不能在FreeMarker模板中执行。

Answer 1

您可以在样式属性中添加“高度：100％”。

这会将表格放到底部，并计算行的高度，以便它们在总高度中平均分配。但是，如果总高度除以行数超过最小行高，则表格将超出屏幕底部。

在这种情况下，您可以将表格包装在高度为100％且溢出为自动的div中，以便滚动表格以使页面固定。

<!-- ITHeight is designed for the expended row -->
<#assign ITHeight = 0 >
<div style="height: 100%; overflow: auto;">
  <table style="margin-top: 0px; height:100%">
    <!-- start items -->
    <#list record.item as item>
    <tr>
      <td>${item_index+1}</td>
      <td>${item.name}</td>
    </tr>

    <!-- Add the extended row --> 
    <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td> 
    </tr>
  </table>
</div>

如何将表格扩展到FreeMarker模板的页面底部？

1 个答案: