如何设置占据页面剩余空间的动态block-container尺寸
实现总计固定在页面底部的XSL-FO动态发票结构
以下是满足需求的最简可用XSL-FO代码,核心利用space-before="auto"实现总计自动推至页面底部,无需复杂的定位或百分比高度设置:
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <!-- 定义页面模板:A4尺寸,四周留20mm边距 --> <fo:layout-master-set> <fo:simple-page-master master-name="invoice-page" page-width="210mm" page-height="297mm"> <fo:region-body margin="20mm"/> </fo:simple-page-master> </fo:layout-master-set> <!-- 发票页面序列 --> <fo:page-sequence master-reference="invoice-page"> <fo:flow flow-name="xsl-region-body"> <!-- 发票抬头 --> <fo:block font-size="16pt" font-weight="bold" margin-bottom="10mm"> XX公司专用发票 </fo:block> <!-- 发票明细表格(动态内容,可根据数据自动增减行数) --> <fo:table width="100%" border-collapse="collapse" margin-bottom="5mm"> <fo:table-column column-width="20%"/> <fo:table-column column-width="50%"/> <fo:table-column column-width="15%"/> <fo:table-column column-width="15%"/> <!-- 表格表头 --> <fo:table-header> <fo:table-row> <fo:table-cell border="1pt solid #000" padding="3mm"> <fo:block font-weight="bold">商品编号</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm"> <fo:block font-weight="bold">商品名称</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm" text-align="right"> <fo:block font-weight="bold">单价(元)</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm" text-align="right"> <fo:block font-weight="bold">金额(元)</fo:block> </fo:table-cell> </fo:table-row> </fo:table-header> <!-- 表格内容(示例行,实际可通过XSLT循环生成) --> <fo:table-body> <fo:table-row> <fo:table-cell border="1pt solid #000" padding="3mm"> <fo:block>INV-2024-001</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm"> <fo:block>无线键鼠套装</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm" text-align="right"> <fo:block>129.00</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm" text-align="right"> <fo:block>129.00</fo:block> </fo:table-cell> </fo:table-row> <fo:table-row> <fo:table-cell border="1pt solid #000" padding="3mm"> <fo:block>INV-2024-002</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm"> <fo:block>高清显示器</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm" text-align="right"> <fo:block>899.00</fo:block> </fo:table-cell> <fo:table-cell border="1pt solid #000" padding="3mm" text-align="right"> <fo:block>899.00</fo:block> </fo:table-cell> </fo:table-row> </fo:table-body> </fo:table> <!-- 总计区域:space-before="auto" 自动填充剩余空间,将总计推至页面底部 --> <fo:block space-before="auto" font-size="14pt" font-weight="bold" text-align="right" margin-top="5mm"> 总计金额:<fo:inline>¥1028.00</fo:inline> </fo:block> </fo:flow> </fo:page-sequence> </fo:root>
关键说明
- 无需设置百分比高度:XSL-FO中
fo:flow本身没有固定高度,直接设置height="100%"不会生效,而space-before="auto"是官方推荐的垂直填充剩余空间的方式。 - 动态内容兼容:明细表格的行数可根据实际数据动态增减,总计始终会被推到页面底部。
- 多页场景扩展:如果需要多页发票且仅最后一页显示总计,可通过
fo:conditional-page-master-reference定义普通页和最后页两个模板,将总计放在最后页的预留区域,简化结构如下:
<fo:layout-master-set> <fo:simple-page-master master-name="normal-page" page-width="210mm" page-height="297mm"> <fo:region-body margin="20mm"/> <fo:region-after extent="10mm" margin="20mm"/> </fo:simple-page-master> <fo:simple-page-master master-name="last-page" page-width="210mm" page-height="297mm"> <fo:region-body margin="20mm" margin-bottom="30mm"/> <!-- 给总计留空间 --> </fo:simple-page-master> <fo:page-sequence-master master-name="invoice-sequence"> <fo:repeatable-page-master-alternatives> <fo:conditional-page-master-reference master-reference="last-page" page-position="last"/> <fo:conditional-page-master-reference master-reference="normal-page"/> </fo:repeatable-page-master-alternatives> </fo:page-sequence-master> </fo:layout-master-set>
内容的提问来源于stack exchange,提问作者Hoy Cheung
相关产品推荐
相关产品推荐

