I have a 16:9 HTML slideshow that I'm displaying in a Page Viewer web part. The web part is in a web part zone that dynamically resizes with the browser window. Below that Page Viewer web part, we have another web part that needs to stay right under page viewer without extra white space.

Web parts layout

If I use the page viewer's default web part settings, the page getting displayed gets cut off vertically. If i set a height, then the height settings are only valid for a specific web part width.

Is there any way I can set the height of the page viewer web part to dynamically resize along with the width in order to keep the 16:9 ratio?

2 Answers 2


I don't believe this is possible with out of the box SharePoint webpart interface. However, it should be pretty easy using JQuery. I pulled an example script from: https://stackoverflow.com/questions/23463443/auto-resize-div-height-based-on-window-width

I tried changing the script I borrowed from the referenced script to match your use case, but I haven't attempted to run it, so you will need to debug.

function changeHeight() {
    var width = $("myPageViewerDiv").width();
    var newHeight = width / 16 * 9;
        "height": newHeight
window.addEventListener('resize', changeHeight);

Try this. JavaScript takes time to effect. I think this is best solution above all. For Fixed custom footer you can use this.

  {height: calc(100vh - 125px) !important;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.