Hide all elements except one div for print view

If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).

* matches the <html> element, so the entire document is hidden.

You need to be more selective about what you hide.


html body * {
 display:none;
}

#printableArea {
 display:block;
}

Also, you may need an !important on #printableArea, but probably not.


You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.

See Print <div id=printarea></div> only?


You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.

.print_area{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;

    background-color: #ffffff;
}

Tags:

Css

Recent Posts