由CSS,报告查看器和Div计算困扰

时间:2011-09-01 00:19:22

标签: javascript css html reportviewer

我被这个问题困扰了几天。基本上我要做的是将一个标题图像添加到一个asp页面,该页面显示一个由Web浏览器调整大小的ms报表查看器。报表查看器应占用网页的其余部分减去标题图像。仅报告查看器的代码就可以很好地工作。添加标题图像时出现问题。由于它是一个固定的高度,它会抛弃整个页面,并且不满足使用与ms报表管理器类似的垂直和水平滚动条显示的要求。我尝试过很多技巧,包括尝试通过CSS来做,改变DIV上的百分比,如果你看看我的代码,我开始使用一些Javascript,但不知道还有什么地方去做。有一次我认为我已经找到了成功,在报表查看器上方添加了一行并将图像放在那里。问题是当Web浏览器的宽度开始崩溃时,报告查看器的行为被修改,因为图像不再允许报表查看器崩溃。目前我正在尝试I Frame,似乎有一些承诺。无论如何,如果有人能发送任何想法,想法,解决方案,明智的裂缝。我当然会很感激。这是我的代码。今天有一次,我坐在办公桌旁,真的不知道该去哪儿。我的网络知识有限。 谢谢 - P狗

<html>
<head id="Head1" runat="server">
    <title></title> 
    <script type="text/javascript">
        window.onload = getH;


        window.onresize = getH; 

        function getH() {
            var browserH = document.documentElement.offsetHeight;
            var divHeaderH = document.getElementById("header").offsetHeight;
            var divContentH = document.getElementById("content").offsetHeight;
            var rptViewerH = document.getElementById("ReportViewer").offsetHeight;

//          var target = document.getElementById('content');
//          target.style.height = (winH + 100) + "px"; 

//          var contentH = winH - divh;
//          
//          alert(divh); 
//          alert (winH); 
//          alert(content);

    //  }
</script>
<style >
    body
    {
    overflow: hidden; 
    }
</style>



</head>
<body> 
    <form id="frmBody" runat="server" style="height:100%; ">

        <%--<div id= "header" style=" width: 100%; height:98px; background-color: brown" >
            <center>
                        <asp:Image ID="imgStateLogo" runat="server" ImageUrl="~/App_Themes/Images/nclogo.jpg" />
            </center>
        </div>--%>

        <div id ="content" style="height: 100%; width:100%;">
            <table id="rptViewer" runat=server align=center width="100%" height="100%">
                <tr>
                    <td>
                        <asp:Label ID="lblTitle" runat="server" style="font-weight:bold" EnableViewState="True"></asp:Label>
                        <asp:ScriptManager ID="scrptRPTViewer" runat="server" AsyncPostBackTimeout="0"  ></asp:ScriptManager>
                        <rsweb:ReportViewer ID="ReportViewer" runat="server" Font-Names="Verdana" Font-Size="8pt" Height="99%" ProcessingMode="Remote" 
                            Width="100%" ShowCredentialPrompts="true" AsyncRendering="False">
                        </rsweb:ReportViewer>
                    </td>
                </tr>
            </table>
        </div>  

    </form>
</body>

</html>

2 个答案:

答案 0 :(得分:1)

高度:这里的问题是100% - 它会查看父级的高度,即占据整个body标签的形式,并设置一个等于该高度的高度。

如果您不愿意使用框架,可以使用JavaScript将内容div的大小设置为等于browserHeight - headerHeight,然后将事件监听器添加到窗口的size事件中以重新计算并重新应用内容每当浏览器窗口改变尺寸时,div的高度。

答案 1 :(得分:0)

不要将您的图片放在与报告相同的表格中,而是将#header放在报告表的上方#content