在打印中显示特定div的内容

Question

I want to print some content from firefox. I already have inside html page <div id="printContent"></div> which is hidden by default. Using css I display this div with injected content on printing like

@media print {    
    #printContent{
        display:block;
    }
}

but on print preview I'm getting some other page div, not just this #printContent . What should I do to get only #printContent on firefox print preview?

Answer 1

Hide the other content using display:none in media selector - I'd suggest your #printContent div be a child of body, then you can

@media print {    
    body>* {
        display:none !important;
    }
    body>div#printContent{
        display:block !important;
    }
}

edit: added !important - depending on other CSS you may or may not need !important