window.print() Not Printing Whole Page? Fix Content Below Scrollbar & Hidden Tabs

Table of Contents#

1. Why window.print() Fails to Print the Whole Page? Common Causes
2. Solution 1: Fix Overflow Issues in Print Styles
3. Solution 2: Remove Fixed Dimensions for Print Layouts
4. Solution 3: Show Hidden Tabs & Elements During Printing
5. Solution 4: Optimize CSS Print Styles for Full Content Rendering
6. Solution 5: Ensure Dynamic/Async Content Loads Before Printing
7. Troubleshooting: Common Pitfalls to Avoid
8. Testing Your Print Layout: Tools & Best Practices
9. Conclusion
10. References

Why window.print() Fails to Print the Whole Page? Common Causes#

Before fixing the issue, it’s critical to understand why window.print() might truncate content. Browsers render print layouts differently from screen layouts, prioritizing paper-friendly formatting (e.g., page breaks, margins) over screen-specific behaviors (e.g., scrollbars, fixed positioning). Here are the most common causes:

1. Overflow: Hidden/Scroll on Containers#

If a parent container (e.g., <div>, <section>) has overflow: hidden or overflow: scroll and a fixed height, the content inside may be scrollable on the screen but clipped in print. Browsers treat scrollable containers as "viewports" and only print the visible portion, ignoring off-screen (scrolled) content.

2. Fixed Height/Width Restrictions#

Containers with fixed dimensions (e.g., height: 500px, max-height: 80vh) force content to fit within a rigid box. On the screen, this may trigger scrollbars, but in print, the browser won’t expand the container to fit overflowing content—resulting in cut-off text or images.

3. Hidden Tabs/Elements (display: none or visibility: hidden)#

Tabs, modals, or sections hidden with display: none (or visibility: hidden) are not rendered in print by default. If your page uses tabs to organize content (e.g., "Overview," "Details"), the inactive tab’s content will be missing from the printout unless explicitly shown.

4. Unoptimized CSS Print Styles#

Browsers apply default print styles (e.g., removing backgrounds, shrinking fonts) that may conflict with your screen styles. If you haven’t defined custom @media print rules, the browser might override critical layout properties, causing content to break.

5. Dynamic/Async Content#

If content loads asynchronously (e.g., via AJAX, lazy loading) or is generated dynamically (e.g., with JavaScript after the page loads), window.print() may execute before the content is fully rendered—leaving gaps or missing sections.

Solution 1: Fix Overflow Issues in Print Styles#

Scrollable containers with overflow: hidden or overflow: scroll are the #1 culprit for truncated print content. To fix this, override overflow properties in print styles to allow content to expand.

How to Implement:#

Use the @media print CSS media query to target print layouts and reset overflow for problematic containers.

Example:#

Suppose you have a scrollable container with class scrollable-content:

/* Screen styles (causes scrollbar) */
.scrollable-content {
  height: 400px; /* Fixed height */
  overflow-y: auto; /* Scrollable on screen */
  border: 1px solid #ccc;
}
 
/* Print styles (fix overflow) */
@media print {
  .scrollable-content {
    height: auto !important; /* Let content expand */
    overflow: visible !important; /* Show all content */
    border: none; /* Optional: Remove borders for print */
  }
}

Key Notes:#

• Use !important to override screen styles (if necessary), but prefer specific selectors to avoid unintended side effects.
• Target nested containers too! If a parent of .scrollable-content also has overflow: hidden, apply the same fix to it.

Solution 2: Remove Fixed Dimensions for Print Layouts#

Fixed height, max-height, width, or max-width on containers can restrict content in print. Replace these with relative units or auto in print styles to let content flow naturally.

How to Implement:#

Reset fixed dimensions to auto or use min-height/min-width to ensure containers expand.

Example:#

/* Screen styles (fixed height) */
.content-container {
  max-height: 600px; /* Truncates content taller than 600px */
  width: 100%;
}
 
/* Print styles (remove fixed height) */
@media print {
  .content-container {
    max-height: none !important; /* Allow unlimited height */
    height: auto !important; /* Expand to fit content */
    width: 100% !important; /* Ensure full width */
  }
}

Pro Tip:#

Use min-height: 100% instead of fixed height for screen styles if possible—it lets content expand while maintaining a minimum height, reducing print conflicts.

Solution 3: Show Hidden Tabs & Elements During Printing#

Hidden tabs (e.g., with display: none) won’t print unless explicitly visible. Use print styles or JavaScript to reveal them temporarily.

Approach 1: Use CSS Print Styles to Show Hidden Tabs#

Override display: none for hidden tabs in @media print:

Example:#

<!-- Tabs: Only "tab-1" is visible on screen -->
<div class="tabs">
  <div class="tab active" id="tab-1">Tab 1 Content (Visible)</div>
  <div class="tab hidden" id="tab-2">Tab 2 Content (Hidden)</div>
  <div class="tab hidden" id="tab-3">Tab 3 Content (Hidden)</div>
</div>

/* Screen styles: Hide inactive tabs */
.tab.hidden {
  display: none;
}
 
/* Print styles: Show all tabs */
@media print {
  .tab.hidden {
    display: block !important; /* Show hidden tabs */
    margin-top: 20px; /* Add spacing between tabs */
    page-break-after: avoid; /* Optional: Prevent page breaks mid-tab */
  }
  .tab.active {
    margin-bottom: 20px; /* Separate active tab from others */
  }
}

Approach 2: Use JavaScript to Toggle Visibility#

If tabs are controlled dynamically (e.g., with a framework like React/Vue), use JavaScript to show hidden content before printing and revert afterward.

Example:#

function printWithAllTabs() {
  // Show hidden tabs
  const hiddenTabs = document.querySelectorAll('.tab.hidden');
  hiddenTabs.forEach(tab => {
    tab.classList.remove('hidden');
    tab.classList.add('print-visible'); // Temporary class
  });
 
  // Trigger print
  window.print();
 
  // Re-hide tabs after print dialog closes
  window.onafterprint = () => {
    hiddenTabs.forEach(tab => {
      tab.classList.add('hidden');
      tab.classList.remove('print-visible');
    });
    window.onafterprint = null; // Reset the event
  };
}
 
// Replace default print trigger with custom function
document.getElementById('print-button').addEventListener('click', printWithAllTabs);

Solution 4: Optimize CSS Print Styles for Full Content Rendering#

Browsers apply default print styles that may hide backgrounds, shrink text, or add unnecessary margins. Define custom @media print rules to ensure all content renders correctly.

Essential Print Styles to Add:#

@media print {
  /* Reset body margins/padding */
  body {
    margin: 0 !important;
    padding: 20px !important;
    font-size: 14px !important; /* Ensure readable text */
  }
 
  /* Remove non-essential elements (e.g., headers, footers, buttons) */
  .no-print {
    display: none !important;
  }
 
  /* Ensure images scale correctly */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
 
  /* Avoid page breaks in the middle of content */
  .avoid-page-break {
    page-break-inside: avoid;
  }
 
  /* Expand full width */
  .container, .row {
    width: 100% !important;
    max-width: none !important;
  }
}

Key Properties:#

• page-break-inside: avoid: Prevents content (e.g., paragraphs, images) from splitting across pages.
• page-break-after: always: Forces a new page after an element (e.g., after a tab).
• background-color: #fff !important: Ensures backgrounds print (some browsers disable this by default; users may need to enable "Print backgrounds" in print settings).

Solution 5: Ensure Dynamic/Async Content Loads Before Printing#

If window.print() runs before dynamic content (e.g., lazy-loaded images, API-fetched data) finishes rendering, that content will be missing. Use JavaScript to wait for content to load before printing.

How to Implement:#

Example: Wait for Lazy-Loaded Images#

async function printAfterContentLoads() {
  // Wait for all images to load
  const images = document.querySelectorAll('img.lazy-load');
  const imagePromises = Array.from(images).map(img => 
    new Promise(resolve => {
      if (img.complete) resolve();
      else img.onload = resolve;
    })
  );
 
  // Wait for all images to load
  await Promise.all(imagePromises);
 
  // Trigger print
  window.print();
}
 
// Use this function instead of window.print()
document.getElementById('print-button').addEventListener('click', printAfterContentLoads);

Key Notes:#

• For API-driven content, wait for the fetch/axios promise to resolve before calling window.print().
• Add a loading spinner to inform users the content is preparing to print.

Troubleshooting: Common Pitfalls to Avoid#

1. Forgetting Nested Containers#

If a grandparent container has overflow: hidden, fixing the parent won’t help. Use browser dev tools (Elements > Computed) to inspect all ancestors’ styles.

2. Overusing !important#

While !important can override screen styles, overusing it makes CSS hard to maintain. Instead, use specific selectors (e.g., @media print .scrollable-content .nested-div).

3. Ignoring Browser Print Settings#

Users may have "Shrink to fit" enabled (default in some browsers), which scales content to fit the page but can cut off long sections. Advise users to set "Scale" to 100% in print dialogs.

4. Missing @media print Target#

Always wrap print styles in @media print to avoid breaking screen layouts.

Testing Your Print Layout: Tools & Best Practices#

• Browser Print Preview: Use Ctrl+P (Windows) or Cmd+P (Mac) to test quickly.
• Chrome DevTools:
  • Open DevTools > More Tools > Rendering.
  • Check "Emulate CSS media type" > Select "print" to preview print styles in the browser.
• Print to PDF: Save the print output as a PDF to inspect layout issues without wasting paper.

Conclusion#

window.print() can reliably print the entire page if you address overflow, fixed dimensions, hidden elements, and dynamic content. By combining CSS print styles with strategic JavaScript (for tabs/dynamic content), you ensure users get a complete, readable printout of your page.

Remember: Test across browsers (Chrome, Firefox, Safari) and devices, as print rendering can vary. Use the @media print query to tailor layouts specifically for print, and always verify with print previews!

References#

• MDN Web Docs: window.print()
• MDN Web Docs: CSS Print Media Query
• MDN Web Docs: Overflow Property
• CSS-Tricks: Printing Basics
• Can I Use: onafterprint Event