[解決済み】A4用紙サイズを設定するCSS
質問
ウェブ上でA4サイズの紙をシミュレートし、ブラウザ(特にChrome)で表示されているようにこのページを印刷できるようにする必要があります。要素サイズを21cm×29.7cmに設定しましたが、印刷(または印刷プレビュー)に回すと、ページが切り取られてしまいます。
これを見てください ライブ例 !
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
}
@page {
size: A4;
margin: 0;
}
@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
<div class="book">
<div class="page">
<div class="subpage">Page 1/2</div>
</div>
<div class="page">
<div class="subpage">Page 2/2</div>
</div>
</div>
何か忘れているような気がする。でも、それは何だろう?
- クローム : クリッピングページ、ダブルページ ( 必要な機能を備えています。 )
- ファイアフォックス : 完全に動作します。
- IE10 : 信じられないかもしれませんが、完璧です!
- オペラ 印刷プレビューで非常にバグが多い
解決方法は?
もう少し調べてみたところ、実際の問題は
initial
をページ
width
の下に
print
というメディアルールがあります。どうやらChromeでは
width: initial
の上に
.page
要素の結果は
スケーリング
に特定の長さの値が定義されていない場合、ページ内容の
width
のどれかの親要素(
width: initial
に解決されます。
width: auto
の下に定義されたサイズよりも小さな値を指定することができます。
@page
ルールは同じ問題を引き起こします)。
そのため、コンテンツだけでなく
長すぎる
ページに対して(約
2cm
) だけでなく、ページのパディングは、最初の
2cm
などがあります(下のコンテンツをレンダリングするようです)。
width: auto
の幅に
~196mm
の幅まで拡大し、さらにコンテンツ全体を
210mm
~ しかし、不思議なことに、以下の幅のコンテンツにもまったく同じスケーリングファクターが適用されます。
210mm
).
この問題を解決するには、単純に
print
メディアルールでは、A4用紙の幅と高さを
html, body
または直接
.page
で、この場合は
initial
キーワードを使用します。
DEMO
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
/* ... the rest of the rules ... */
}
これは、あなたのオリジナルのCSSで他のすべてを維持し、Chromeの問題を修正するようです(Windows、OS X、UbuntuでChromeの異なるバージョンでテスト)。
関連
-
[解決済み] CSSを使用します。ウィンドウの幅の50%の背景色を設定する
-
[解決済み] cssによる波状の形状
-
[解決済み] Bootstrap 4のclass="mb-0 "とは何ですか?
-
[解決済み] cssのフォントサイズ14px/26pxってどうなってるの?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSの三角形はどのように機能するのですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】@font-faceが機能しない。
-
[解決済み] Bootstrap 4のナバーボタンのアイコンの色を変更するにはどうすればよいですか?
-
[解決済み] moz-とwebkit-とは何ですか?[重複しています]。
-
[解決済み] JavaFX Labelの文字色を変更する方法
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] HTMLとCSSのBackground-imageが表示されない
-
[解決済み] 四角いボタンの作り方
-
[解決済み] twitter-bootstrapの@-ms-viewportというタグは何ですか?
-
[解決済み] ReactJSを使ったインラインのフォントサイズスタイルの生成
-
[解決済み] A4用紙サイズのHTMLページを作るには?