1

我的网页上有一个表格，它使用特定的打印 CSS，它删除了所有网站元素，以便可以将其打印在海报上。

我要做的是：

  1. 使用谷歌浏览器访问页面，
  2. 点击：文件->打印->“使用系统对话框打印...”，
  3. 点击 PDF -> “另存为 PostScript”，然后
  4. 使用 Adob​​e Distiller (150 dpi & 18” x 24”) 处理。

由于我希望我的桌子能很好地填满 18"x24" (18/24 = 3/4) 海报，我怎样才能确保它的宽度/高度纵横比是 3/4，而不需要输入特定的尺寸在印刷品上咬我？

4

1 回答 1

1

目前，我想到的唯一解决方案是你必须用两个额外div的 s 包裹桌子。

这是小提琴

正如我们所说，我正在尝试改进解决方案以摆脱 div。

目前，我使用一个 div 作为wrapper宽度设置为 100% 的 div，然后在其中有另一个 div ( innerWrapper) 绝对定位并扩展到wrapper的尺寸。为了设置 div 的高度，我使用了一个简单的技巧 - 将一个伪:after元素添加到设置为 133%的 divwrapper中。padding-bottom填充百分比值是从父级继承的width（是的！）。如果有人问 - 我们不能省略innerWrapperdiv 并将其样式直接设置为table因为top, right, bottom, left方法不适用于它（两者都width设置height为100%）。div 是block元素，表有display: table.
整个代码如下所示：

HTML：

<div id="wrapper">
    <div id="innerWrapper">
        <table></table>
    </div>
</div>

CSS：

#wrapper {
    width:100%;
    position: relative;
}
#wrapper:after {
    content: "";
    display: block;
    padding-bottom: 133%;
}
#innerWrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
table {
    width: 100%;
    height: 100%;
}
于 2013-10-23T11:16:17.893 回答