带有侧边栏的全高度报告查看器

Question

我正在尝试使用报表查看器实现此布局。 左侧面板包含报告的各种选项。右边是报告本身。如果需要，报告组件会滚动，但网页本身不会滚动。非常标准的asp.net报告页面。或者我也是。

布局本身我可以轻松完成，有大量关于如何获得此结果的文档，并且它们在没有报表查看器的情况下工作。但是，报表查看器根本没有合作，并且在我添加它时似乎没有遵循任何逻辑。

我可以让2个div并排。我可以让报告的父div占用所有可用的高度。我无法让报表查看器同时执行这两项工作并继续正常工作。我需要什么样的不敬虔的CSS来获得我想要的布局？我不介意使用表而不是div，但是我没有用表来获得更好的结果。

我的大多数尝试最终都看起来像这样： 报告显示它应该在哪里，宽度很好，但我不能让它采取所有可用的高度。如果我设置一个以像素为单位的高度，它可以变得更高，但是我希望它能够占用所有剩余的垂直空间，无论窗口大小和分辨率如何。它总是忽略任何类型的相对高度值。

或者 它需要所有可用的高度，但拒绝留在选项旁边。

所以这是我的基础结构。如前所述，它可以使用表格，我不介意。

<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>

如何让Microsoft.ReportViewer.WebForms报表查看器获取所有可用的垂直空间并保留在选项面板旁边而不会使页面滚动？

Answer 1

将周围的 div 设置为高度 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>