带侧边栏的全高报表查看器答案

【问题标题】：Full height report viewer with a sidebar带侧边栏的全高报表查看器
【发布时间】：2018-02-06 03:22:50
【问题描述】：

我正在尝试使用报表查看器来实现此布局。左侧面板包含报告的各种选项。右边是报告本身。如果需要，报告组件会滚动，但网页本身不会。非常标准的 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 报表查看器既占用所有可用的垂直空间又保持在选项面板旁边而不滚动页面？

【问题讨论】：

如果我错了，请纠正我，但 reportView 不是占容器高度的 100% 吗？如果您希望容器 (reportContainer) 采用所有可用高度，那么您必须在容器上放置 css-style。你说你可以让报表父div占据所有的高度，你这样做会发生什么？
@chrillelundmark 它什么都不做，报表查看器保持在它的任何高度。好像只有 asp.net 控件的 Height 属性才真正影响它。
那我想我帮不了你，对我来说问题出在报告视图中。您是否尝试过使用不同的缩放模式来查看报告会发生什么？
@chrillelundmark 是的，zoomModes 对此没有帮助。啊，好吧，无论如何，谢谢，现在我放弃了，只是为各种静态高度写了一堆媒体查询。

标签： css asp.net webforms reportviewer report-viewer2010

【解决方案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>

【讨论】：