html - CSS @media 印刷がまったく機能しない

Question

@media プリントが機能しない理由に何時間も苦労しています。このサイトでも Google で検索しましたが、何も役に立たなかったので、この質問を投稿しました。Google chrome の印刷プレビュー (ctrl p) でテストしていますが、ページに印刷しても空白のままです。

別の css ファイルと、ページに埋め込まれた css スタイルを作成しようとしました。

これが私のコードです

ヘッダー

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

HTML

<div id="bruikleenovereenkomst">
    <div id="blo_header">

    </div>

    <div id="blo_side_top"></div>
    <div id="blo_side_bottom"></div>
</div>      

CSS 通常スタイル

div#bruikleenovereenkomst {
    width:595px;
    height:842px;
    background-color:#fff;
    position:relative;
}

div#blo_header {
    width:100%;
    height:125px;
    background-color:#FBE983;
    z-index:9
}

div#blo_side_top {
    width:57px;
    height:420px;
    background-color:#B6CAE5;
    position:absolute;
    right:0;
    top:0;
    z-index:99;
}

div#blo_side_bottom {
    width:57px;
    height:420px;
    background-image:url(../images/leaflet.png);
    background-repeat:no-repeat;
    position:absolute;
    right:0;
    bottom:0;
    z-index:99;
}

CSS 印刷スタイル (print.css) 注: div#bruikleenovereenkomst は、テスト用の単なる黒いブロックです。

@media print{

    body {
        margin:0;
    }

    h1#logo {
        display:none;
    }

    ul#menu {
        display:none;
    }

    div#bruikleenovereenkomst {
        width:100%;
        height:500px;
        background-color:#000;
    }

    div#blo_header {
        display:none;
    }

    div#blo_side_top {
        display:none;
    }

    div#blo_side_bottom {
        display:none;
    }

}

印刷で得られるのは、空白のページだけです。

Answer 1

印刷する div 要素内に印刷メディア スタイルを追加する必要があります