将 html 中的框内容与底部对齐到 PDF - 没有 flexbox

Question

我有一个包含 3 个其他盒子的静态高度的盒子，第一个和最后一个是静态高度，中间那个是动态的。

div {
    box-sizing: border-box;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
}

.returnsPolicy {
    height: 33mm;
    margin: 0;
    border: 0;
    font-size: smaller;
    text-align: center;
    padding-bottom: 1mm;
    /*position: relative;*/
}

p {
    margin: 0;
    border: 0;
    white-space: normal;
    vertical-align: bottom;
}

.returnsHeaderRow {
    height: 4mm;
    line-height: 4mm;
    font-weight: bold;
    /*margin-top: auto;
    margin-bottom: 0;*/
}

.returnsDisclaimerRow {
    height: 4mm;
    line-height: 4mm;
    /*position: absolute;
    bottom: 0;*/
}

.returnsMainContent {
    max-height: 20mm;
    height: auto;
    /*position: absolute;
    bottom: 4mm;*/
}

<div class="returnsPolicy">
    <p class="returnsHeaderRow">
        <b>
            We want every customer to be totally satisfied with their purchase.
        </b>
    </p>
    <p class="returnsMainContent">
        If you change your mind about your purchase, please return the unused goods to us with the original proof of
        purchase within 45 days, and we will offer you an *exchange or a refund. This does not affect your statutory
        rights, including your right to claim a refund, repair or exchange where the goods are faulty or misdescribed.
    </p>
    <p class="returnsDisclaimerRow">
        *Excluding all shoe care products
    </p>
</div>

css中的注释部分是我尝试过但未成功的部分。

使用 flexbox 会非常容易，但我正在尝试使用 html-pdf 在 Node 实例上将一些 html 转换为 PDF，而后者又使用 PhantomJS，并且对于打印后 flex 定位无法正常工作的某些原因（如果我尝试在浏览器上使用 flex 预览结果，它也可以正常工作）

将它放在 .returnsPolicy 样式中，并且在常规的现代浏览器上它可以工作。

display: flex;
flex-direction: column;
justify-content: flex-end;

但遗憾的是，我的情况并非如此。

returnsMainContent 是包含动态内容的框，我的目标是将所有内容对齐到底部。这是一个页脚，我希望它占用尽可能少的 space，但是如果我的文本没有填充 returnsMainContent 中的区域，那么我将在 returnsDisclaimerRow.[=14 之后有一些空的 space =]

通过使用relative/absolute定位，我可以将 returnsDisclaimerRow 和 returnsMainContent 底部对齐，但是 returnsHeaderRow 不能用绝对值定位，结果是它和 returnsMainContent 之间的白色 space .

一个解决方案可能是添加一个仅包含白色 space 的额外动态段落，它将扩展并将其他段落推到底部，但是当我尝试时我最终覆盖了其他段落...

想法？

Answer 1

您可以做的只是为您的内容添加一个包装器 div，这就是您使用 position: absolute; bottom: 0; 设置的包装器 div。然后里面的所有内容都可以在流程中占据一席之地。

您只需要注意包装器 div 中的内容的高度不会比 .returnsPolicy 大，因为它不会适应大小，但事实并非如此似乎是你的情况。

    div {
        box-sizing: border-box;
        overflow: hidden;
        word-break: keep-all;
        white-space: nowrap;
    }

    .returnsPolicy {
        height: 33mm;
        margin: 0;
        border: 0;
        font-size: smaller;
        text-align: center;
        padding-bottom: 1mm;
        position: relative;
    }

    .returnsPolicyWrap {
        position: absolute;
        bottom: 0;
    }

    p {
        margin: 0;
        border: 0;
        white-space: normal;
        vertical-align: bottom;
    }

    .returnsHeaderRow {
        height: 4mm;
        line-height: 4mm;
        font-weight: bold;
    }

    .returnsDisclaimerRow {
        height: 4mm;
        line-height: 4mm;
    }

    .returnsMainContent {
        max-height: 20mm;
        height: auto;
    }

<div class="returnsPolicy">
  <div class="returnsPolicyWrap">
    <p class="returnsHeaderRow">
        <b>
            We want every customer to be totally satisfied with their purchase.
        </b>
    </p>
    <p class="returnsMainContent">
        If you change your mind about your purchase, please return the unused goods to us with the original proof of
        purchase within 45 days, and we will offer you an *exchange or a refund. This does not affect your statutory
        rights, including your right to claim a refund, repair or exchange where the goods are faulty or misdescribed.
    </p>
    <p class="returnsDisclaimerRow">
        *Excluding all shoe care products
    </p>
  </div>
</div>

将 html 中的框内容与底部对齐到 PDF - 没有 flexbox

Align box content to bottom in html to PDF - no flexbox

html

css

node.js

phantomjs