How do i use @media print queries with a dynamic web page? All i'm getting is a blank page currently

I have a dynamic web page that is generated when a user clicks to view more details on a car. I basically want a button that says 'Print Details' so the customer can print the vehicle details, but I don't want it to print the header and footer just the bits in the middle. So I currently have (without pasting allll my code) a div with my header and a div with my footer. Then I have a section tag using the class's 'section white'. When the user clicks print, I want to print JUST the section tag and everything inside it. However currently when I've tried this I just get a blank page..

This is the code I'm currently using to try and do it.

    <style type="text/css">
        @media print { 
            body * { 
                visibility: hidden !important;
            } 

            .section .white { 
                visibility: visible !important;
                height: 100%; 
                width: 100%; 
                position: fixed; 
                background-color: blue;
                top: 0; 
                left: 0; 
                margin: 0; 
                padding: 15px; 
                font-size: 14px; 
                line-height: 18px; 
                z-index: 9999999;
            } 
        }
    </style>

I won't paste my HTML page, only because it's a lot of code but the structure looks like this.

<html>
 <body>
  <div class="header">
  </div>
  <section class="section white">
  </section>
  <div class="footer">
  </div>
 </body>
</html>

Solution

body * { 
    visibility: hidden !important;
}

This hides everything inside the body.

.section .white { 
     visibility: visible !important;
}

This unhides anything with class="white" that is a descendant of anything with class="section".

You aren't selecting the section

<section class="section white">

The only element with class="white" is the same element as has class="section". It is not a descendant of it.

Remove the descendant combinator:

.section.white {}

You have no content to print

<section class="section white">
</section>

There's nothing to see. You have to have some content for it to show up!

If you did have content, then any elements would still be hidden

body * would match them and hide them.

Just hide the elements you need to hide, and nothing else. Use selectors that actually match them.

Write semantic markup while you are at it. Don't use classes which match element types, either use better class names or the actual element types.

Avoid !important, it is almost always more trouble than it is worth.

body > :not(section):not(.white) {
    visibility: hidden;
}

<header>
  This is the header
</header>
<section class="white">
  <p>This is a section</p>
  <p>...</p>
</section>
<footer>
  This is the footer
</footer>