Printing specific div content with css media type print?

Question

i have html which contain frames like below

  <frameset rows="60,*" border="0" frameborder="0">
    <frame name="frameA">
    <frameset cols="120,*" >
      <frame name="frameB" frameborder=0 >
      <frame name="frameC">
    </frameset>
  </frameset>

Inside frame C i have div with id "myDivToPrint". I want when user click browser print, it just print the content of div myDivToPrint. Here is my relevant css

CSS

@media print {
    #myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

html

 <div  id="myDivToPrint" class="page-container myDivToPrint">
  </div>

But it does not seem to have any impact on print/print preview(firefox displays all frame content and chrome displays only top frame content under print preview). Any ideas?

Reference for above approach :- BC post at Print the contents of a DIV

Answer 1

You must hide the elements you don't want to print. Something like this:

@media print {
    #myDivToPrint {
       ...
    }

    #elementYouDontWantToPrintId {
       display:none;
    }

}