高さ100％のdivは、印刷時にChromeで動作しません

すべての印刷ページにdivを書きたいと思います。だからdivの100％の高さでした。通常、すべてのブラウザで正常に動作しています。しかし、このページを印刷すると、Chromeで動作しません。高さ100％のdivは、印刷時にChromeで動作しません

<!DOCTYPE HTL> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<meta name="robots" content="noindex, nofollow"> 
<meta name="googlebot" content="noindex"> 
<meta http-equiv="cache-control" content="no-cache">  
<title>Brove.NET ISO Yazılımı</title> 
<style> 
html,body{ 
    padding:0; 
    margin:0; 
    height:100%; 
    width:100%; 
} 
.sayfa{ 
    height: 100%; 
    width: 768px; 
} 
</style> 
</head> 

<body> 
<div class="sayfa" style="background-color:#666666">fds</div> 
<div class="sayfa" style="background-color:#cccccc">fds</div> 
<div class="sayfa" style="background-color:#aaaaaa">fds</div> 


<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> 
</body> 
</html>

出典

2012-01-12 FURKAN ILGIN

これが解決され、男...

が、それについては疑いを私はこのバグ上の任意のドキュメントを見つけることはできませんが、それは間違いなくバグだ

@media print and (-webkit-min-device-pixel-ratio:0) { 
.sayfa{ 
    height: 1101px; 
    width: 768px; 
} 
}

出典

2012-01-12 13:24:52 RuudVanNistelrooy

このCSS /クロームの問題は、ここで乗り越えてきた：

height 100% in chrome

は、この情報がお役に立てば幸いです。

出典

2012-01-12 12:59:42 Brissles

。それは動作していません:( –

でこのコードを試してみてください。

あなたのコードは、Webkit以外のブラウザでも完全に実行されます（Safariは同じことをしていると仮定しています）。画面上に表示され、印刷をクリックすると失敗します。やるべき男は何ですか？

回答は、HTMLおよびBODYは「実際」の測定ではなくパーセントで定義された高さをタグ与える：

html, body { 
    margin: 0; 
    padding: 0; 
    /* etc */ 

    height: 880px;  
} 

div.sayfa { 
    height: 33%; 
}

ページは上記のスタイルを使用して19+のFirefox 14とChromeから同じことを印刷します。

私の実験では、使用していたプリンターの印刷ページの高さが880ピクセルでしたが、あなたの走行距離はおそらく変化します。 EMも機能しますが、頭痛があまりにも多く発生したので、最終的なピクセル値が最も効果的です。

これは面倒な回避策ですが、少なくとも実際にはが動作します。

出典

2012-07-27 13:45:17

セット100％にあなたのhtmlと体の要素の幅と高さ：私は前にここで見てきた

<style> 

html { 
    width: 100%; 
    height: 100%; 
} 

body { 
    width: 100%; 
    height: 100%; 
} 

</style>

出典

2016-01-27 15:41:57

高さ100％のdivは、印刷時にChromeで動作しません

答えて

関連する問題