Stumped by CSS, Report Viewer and Div Calculations_问答_开发者

Stumped by CSS, Report Viewer and Div Calculations

开发者 https://www.devze.com 2023-04-01 13:11 出处：网络

I\'ve been stumped by this problem for a couple of days. Basically what I\'m trying to do is add a header image to an asp page that displays an ms report viewer that is sizable by the web browser. The

I've been stumped by this problem for a couple of days. Basically what I'm trying to do is add a header image to an asp page that displays an ms report viewer that is sizable by the web browser. The report viewer should take up the remainder of the web page minus the header image. The code for the report viewer alone works beautifully. The problem comes when I add the header image. Since it's a fixed height it throws off the entire page and the requirements of having the vertical and horizontal scroll bar display similar to ms report manager is not met. I've tried many techniques including trying to do it through CSS, changing the percentages on the DIVs and if you look at my code I started with some Javascript but didn't know where else to go with it. At one point I thought I had found success adding a row above the report viewer and putting the image there. The problem was when the width of the web browser began to collapse there's a point where the behaviour of report viewer is modified because the image doesn't allow the report viewer to collapse anymore. Currently I'm trying an I Frame and there seems to be some promise. Anyway, if anyone can send me any ideas, thoughts, solutions, wise cracks. I would certainly appreciate it. Here's my code. At one point today, I sat at my desk and really had no idea where to go. I have limited web knowledge. Thanks -- P dog

<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开发者_Go百科" 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>

Height: 100% is the problem here - it looks at the height of the parent, which is the form that takes up the entire body tag, and sets a height equal to that.

If you're not willing to use frames, you can use JavaScript to set the size of the content div to be equal to browserHeight - headerHeight, and then add an event listener to the window's size event to recalculate and reapply the content div's height everytime the browser window changes dimensions.

Instead of putting your image in the same table as the report, drop your #header above the report table in your #content.