0

私は、印刷することのみを目的とした単純な html ページを設計しています。画面上でどのように見えるかは気にしませんが、1 ページ (A4 またはレター) に任意のブラウザーから印刷する必要があります。したがって、パーセントのみのサイズの div を使用する必要があります。

次のスケルトン コードの問題は、Chrome の印刷プレビューで、Web ページに表示される内容とは対照的に、最初の行に 2 つの単語が両方とも表示されることです。FF と IE ではこの問題は発生しません。

<!DOCTYPE html>

<html>

<head>
    <style type="text/css">
    html, body, div, p, span { margin:0px;padding:0px; }
    html, body { width:100%;height:100%;min-height:100%;}
    </style>
</head>

<body>

    <div style="height:70%;">
      first
    </div>

    <div style="height:30%;">
      second
    </div>

</body>
</html>
4

2 に答える 2

1

レターは、いわゆる「標準」用紙タイプの最小サイズです。ただし、A4より少し広いです。それでは、Letter の高さと A4 の幅に制限してみませんか? いずれにせよ、幅の違いのかなりの部分を占めるマージンスペースを組み込む必要があります。

そのためには、パーセンテージから実際のインチまたはミリメートル (より正確) に切り替えることはどうでしょうか。CSS はこれらの単位をサポートしています。

たとえば、サポートする最大の用紙サイズと最小の用紙サイズについて、ページ サイズの 70% をミリメートル単位で計算します。Letter と A4 を使用します。したがって、279mm (レター) の 70% = 195.3 を切り捨てて (より安全に) 195 にしますmin-height: 195mm; 。max-height: 207mm;

30% を計算しています...

min-height: 83mm;
max-height: 89mm;

私には聞こえますが、なぜうまくいかないのかわからないのですか？

于 2013-01-31T21:56:07.680 に答える
0

@media print を使用し、css メディア タイプとその使用方法を確認します。たとえば、ここにサンプルが書かれています。テストのために追加された境界線を削除できます。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    @media screen {
    html, body, div, p, span { margin:0px;padding:0px; }
    html, body { width:100%;height:100%;}
    div.first {height:70%; width:100%;   }
    div.second {height:30%; width:100%; }
    }
    @media print {
    html, body, div, p, span { margin:0px;padding:0px; }
    html, body { width:100%;height:100%;}
    div.first {height:70%; width:100%; border:1px solid red; display:block;   position:fixed; top:0; left:0;  }
    div.second {height:30%; width:100%; border:1px solid blue; display:block; position:fixed; bottom:0; left:0; }

    }
    </style>
</head>
<body>
    <div class="first">
     first
    </div>
    <div class="second">
      second
    </div>
</body>
</html>
于 2013-01-31T21:39:01.517 に答える