Full height report viewer with a sidebar

Question

I'm trying to achieve this layout with a report viewer. The panel on the left contains various options for the report. On the right is the report itself. The report component scrolls if needed but the webpage itself doesn't. Pretty standard asp.net report page. Or so I though.

The layout itself I can do it easily, there's plenty of documentation on how to get this result and they work without the report viewer. However the report viewer isn't cooperating at all and doesn't seem to follow any logic when I add it.

I can make 2 divs be side by side. I can make the report's parent div take all the available height. I cannot get the report viewer to do both and keep working properly. What kind of ungodly CSS do I need to get the layout I want? I don't mind using a table instead of divs but I didn't get any better result with a table.

Most of my attempts end up looking like either of these: The report shows up where it should be and the width is fine, but I can't get it to take all the available height. If I set an height in pixels it can get taller just fine but I want it to take all the remaining vertical space, no matter the window size and resolution. It always disregard any kind of relative height values.

Or It takes all the available height, but refuses to stay next to the options.

And so here's the base structure I have. As mentionned before it could use a table instead, I don't mind.

<style type="text/css">
    .reportContainer {
    }

    .reportOptions {
    }

    .reportView {
    }
</style>
<div class="reportContainer">
    <div class="optionSidebar">
        <table id="reportOptions">
            <!--the options -->
        </table>
    </div>
    <div class="reportView">
        <rsweb:ReportViewer ID="theReportViewer" runat="server"
         ShowPrintButton="true" Visible="true" ShowRefreshButton="false"
         KeepSessionAlive="False" ZoomMode="PageWidth" 
         Width="100%" Height="100%" />
    </div>
</div>

How do I get a Microsoft.ReportViewer.WebForms report viewer to both take all the available vertical space and stay next to the options panel without making the page scroll?

Answer 1

Set surrounding div to height 100vh

<div class="reportView" style="height: 100vh;">
        <rsweb:ReportViewer ID="theReportViewer" runat="server"
         ShowPrintButton="true" Visible="true" ShowRefreshButton="false"
         KeepSessionAlive="False" ZoomMode="PageWidth" 
         Width="100%" Height="100%" />
    </div>