--- title: "Render PDF at full height | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/knowledge-base/render-document-full-height/" md_url: "https://www.nutrient.io/guides/web/knowledge-base/render-document-full-height.md" last_updated: "2026-05-18T14:28:53.388Z" description: "This guide outlines how to render a whole document at full height. for Nutrient Web SDK." --- This guide outlines how to render a whole document at full height. For performance reasons, even if you set the container height to the full height of a document, the viewport won’t render more than 10 pages simultaneously (5 if you’re on page 0). Therefore, if you want to be able to navigate a document while rendering at full height, you have to update the current page as you scroll down the container, so that the rendered pages change to surround the current page: ```js // If we want modal dialogs to be centered in the viewport, we need to tweak // the style and update when the window size, scroll, or // zoom values change. function updateModalClassStyle() { const currentStyleEl = instance.contentDocument.querySelector( "#modalPosition" ); if (currentStyleEl) { currentStyleEl.parentNode.removeChild(currentStyleEl); } const styleEl = document.createElement("style"); styleEl.setAttribute("id", "modalPosition"); styleEl.appendChild( document.createTextNode(`.PSPDFKit-Modal-Backdrop { position: fixed!important; bottom: auto; right: auto; width: 100%; top: ${ instance.contentDocument.querySelector(".PSPDFKit-Scroll").scrollTop }px; height: ${window.innerHeight}px; }`) ); const head = instance.contentDocument.querySelector("head"); if (head) { head.appendChild(styleEl); } } // Update and return the current container height, which can change with different // zoom values or window sizes. function updateContainerHeight() { let containerHeight = 0; for (let i = 0; i < instance.totalPageCount; i++) { containerHeight += instance.pageInfoForIndex(i).height + instance.viewState.spreadSpacing; } containerHeight *= instance.currentZoomLevel; // Convert to client dimension. containerHeight += 44; // Toolbar height containerHeight += instance.viewState.viewportPadding.vertical * 2; // Viewport padding. document.querySelector( ".container" ).style.height = `${containerHeight}px`; return containerHeight; } // Update the scroll listener to avoid querying the DOM inside it. function updateScrollListener(containerHeight) { const rect = document.querySelector(".container").getBoundingClientRect(); const containerTop = rect.top + 44; const containerBottom = containerTop + containerHeight - 44; window.onscroll = function () { if ( window.scrollY > containerTop && window.scrollY < containerBottom ) { const currentPageIndex = Math.floor( (instance.totalPageCount * (window.scrollY - containerTop)) / containerHeight ); if (currentPageIndex!== instance.viewState.currentPageIndex) { instance.setViewState((viewState) => viewState.set("currentPageIndex", currentPageIndex) ); } updateModalClassStyle(); } }; } function updateView() { updateScrollListener(updateContainerHeight()); updateModalClassStyle(); } window.onresize = updateView; instance.addEventListener("viewState.zoom.change", updateView); updateView(); ``` This has been tested with Nutrient Web SDK 2020.6.1. --- ## Related pages - [Add Custom Keyboard Shortcuts](/guides/web/knowledge-base/add-custom-keyboard-shortcuts.md) - [How to add a custom toolbar item to display current zoom percentage](/guides/web/knowledge-base/add-custom-zoom-perentage.md) - [Add Listener Text Note Annotation](/guides/web/knowledge-base/add-listener-text-note-annotation.md) - [Add Listener Toolbar Item](/guides/web/knowledge-base/add-listener-toolbar-item.md) - [Add Signature Initials](/guides/web/knowledge-base/add-signature-initials.md) - [Listen to an annotation’s hover event](/guides/web/knowledge-base/annotations-hover-event.md) - [Blurry Print Resolution](/guides/web/knowledge-base/blurry-print-resolution.md) - [Automatic Annotation Field Tab Ordering](/guides/web/knowledge-base/automatic-annotation-field-tab-ordering.md) - [Change Default Line Width Ink Annotations](/guides/web/knowledge-base/change-default-line-width-ink-annotations.md) - [Check Document Contains Annotations](/guides/web/knowledge-base/check-document-contains-annotations.md) - [Keep widget annotation dimensions consistent across devices](/guides/web/knowledge-base/consistent-widget-annotation-dimensions.md) - [Customize Page Indicator](/guides/web/knowledge-base/customize-page-indicator.md) - [Check Password Protected Files](/guides/web/knowledge-base/check-password-protected-files.md) - [Control Appearance Of Delete Button On Ink Annotations](/guides/web/knowledge-base/control-appearance-of-delete-button-on-ink-annotations.md) - [Create Highlight Annotations From Text Extraction Technology](/guides/web/knowledge-base/create-highlight-annotations-from-text-extraction-technology.md) - [Default To Cloudy Border](/guides/web/knowledge-base/default-to-cloudy-border.md) - [Delete All Annotations](/guides/web/knowledge-base/delete-all-annotations.md) - [Deselect Text](/guides/web/knowledge-base/deselect-text.md) - [Detect Pspdfkit Ui Loaded](/guides/web/knowledge-base/detect-pspdfkit-ui-loaded.md) - [Determine Current Layout Mode](/guides/web/knowledge-base/determine-current-layout-mode.md) - [Disable Context Menu](/guides/web/knowledge-base/disable-context-menu.md) - [How to disable text annotation movement in web apps](/guides/web/knowledge-base/disable-text-annotation-movement.md) - [Download Exported Document](/guides/web/knowledge-base/download-exported-document.md) - [Disable Resize Of Annotations](/guides/web/knowledge-base/disable-resize-of-annotations.md) - [Export Ink Annotation Image](/guides/web/knowledge-base/export-ink-annotation-image.md) - [Find Ink Annotation For Signature Form Field](/guides/web/knowledge-base/find-ink-annotation-for-signature-form-field.md) - [Focus Viewer After Loading](/guides/web/knowledge-base/focus-viewer-after-loading.md) - [Focus the delete button in a confirm dialog](/guides/web/knowledge-base/focus-delete-button-in-confirm-modal-component.md) - [Extracting text and cursor position in annotations](/guides/web/knowledge-base/extract-annotation-text-and-retrieve-cursor-position.md) - [Focus Widget Annotation](/guides/web/knowledge-base/focus-widget-annotation.md) - [Get Entered Document Password](/guides/web/knowledge-base/get-entered-document-password.md) - [Fix errors with unsupported form field actions](/guides/web/knowledge-base/handle-unsupported-form-field-actions.md) - [Get Visible Annotations](/guides/web/knowledge-base/get-visible-annotations.md) - [Handling Clicks On Custom Overlays](/guides/web/knowledge-base/handling-clicks-on-custom-overlays.md) - [Highlight required form fields](/guides/web/knowledge-base/highlight-required-fields.md) - [How Do I Limit The Number Of Annotations](/guides/web/knowledge-base/how-do-i-limit-the-number-of-annotations.md) - [How Do I Disable Scrolling On Page Edges](/guides/web/knowledge-base/how-do-i-disable-scrolling-on-page-edges.md) - [How Do I Prevent Printing Annotations](/guides/web/knowledge-base/how-do-i-prevent-printing-annotations.md) - [Resize multiline text fields to avoid overflow](/guides/web/knowledge-base/how-do-i-resize-form-fields.md) - [How Do I Toggle The Theme](/guides/web/knowledge-base/how-do-i-toggle-the-theme.md) - [How Do I Rotate A Page](/guides/web/knowledge-base/how-do-i-rotate-a-page.md) - [How Do I Zoom To A Specific Value](/guides/web/knowledge-base/how-do-i-zoom-to-a-specific-value.md) - [How To Create Bookmarks From Outline Elements](/guides/web/knowledge-base/how-to-create-bookmarks-from-outline-elements.md) - [Image Attachments Lost Stamp Annotation Templates](/guides/web/knowledge-base/image-attachments-lost-stamp-annotation-templates.md) - [License Registered Different Bundle Id](/guides/web/knowledge-base/license-registered-different-bundle-id.md) - [Iterate over form fields and widgets](/guides/web/knowledge-base/iterate-over-form-fields.md) - [Load Pdf As Arraybuffer](/guides/web/knowledge-base/load-pdf-as-arraybuffer.md) - [Link Text](/guides/web/knowledge-base/link-text.md) - [Load Pdf From Stream](/guides/web/knowledge-base/load-pdf-from-stream.md) - [Loading Multiple Files](/guides/web/knowledge-base/loading-multiple-files.md) - [Nutrient Size Optimization](/guides/web/knowledge-base/nutrient-size-optimization.md) - [Load Pdf Stub From String](/guides/web/knowledge-base/load-pdf-stub-from-string.md) - [Disabling automatic synchronization in Nutrient Web SDK](/guides/web/knowledge-base/manual-instant-sync.md) - [Observe Document Editor Visibility](/guides/web/knowledge-base/observe-document-editor-visibility.md) - [Override Ink Signature Dialog](/guides/web/knowledge-base/override-ink-signature-dialog.md) - [Override User Agent](/guides/web/knowledge-base/override-user-agent.md) - [Persist Currently Edited Note Test](/guides/web/knowledge-base/persist-currently-edited-note-test.md) - [Overview](/guides/web/knowledge-base/overview.md) - [Prevent Shortcut Printing](/guides/web/knowledge-base/prevent-shortcut-printing.md) - [Persist Ink Signatures Across Instances](/guides/web/knowledge-base/persist-ink-signatures-across-instances.md) - [Place Annotation At Visible Center](/guides/web/knowledge-base/place-annotation-at-visible-center.md) - [Prevent Editing Content Text Annotation](/guides/web/knowledge-base/prevent-editing-content-text-annotation.md) - [Process Currently Rendered Pages](/guides/web/knowledge-base/process-currently-rendered-pages.md) - [Programmatically Navigate To Page](/guides/web/knowledge-base/programmatically-navigate-to-page.md) - [Programmatic Comment Annotations](/guides/web/knowledge-base/programmatic-comment-annotations.md) - [Read-only forms](/guides/web/knowledge-base/read-only-forms.md) - [Render Night Mode](/guides/web/knowledge-base/render-night-mode.md) - [Render Page Black White](/guides/web/knowledge-base/render-page-black-white.md) - [Render Visible Area In Current Page](/guides/web/knowledge-base/render-visible-area-in-current-page.md) - [Render Page Without Annotations](/guides/web/knowledge-base/render-page-without-annotations.md) - [Render Watermark When Printing](/guides/web/knowledge-base/render-watermark-when-printing.md) - [Restore Last Seen Page](/guides/web/knowledge-base/restore-last-seen-page.md) - [Save Modified Pdf To Document Engine](/guides/web/knowledge-base/save-modified-pdf-to-document-engine.md) - [Show Annotations Properties As Tooltip](/guides/web/knowledge-base/show-annotations-properties-as-tooltip.md) - [Rotate Ink Annotation](/guides/web/knowledge-base/rotate-ink-annotation.md) - [Show Focus Ring Read Only](/guides/web/knowledge-base/show-focus-ring-read-only.md) - [Submit Ink Signatures With Form](/guides/web/knowledge-base/submit-ink-signatures-with-form.md) - [Wait For Element Appear](/guides/web/knowledge-base/wait-for-element-appear.md) - [Web Sdk Vs Dws Viewer](/guides/web/knowledge-base/web-sdk-vs-dws-viewer.md) - [Easily zoom to specific annotations in PDF](/guides/web/knowledge-base/zoom-to-specific-annotation.md)