javascript - 被 CSS、报表查看器和 Div 计算难住了

标签 javascript css html reportviewer

我已经被这个问题难住了几天了。基本上我想要做的是将标题图像添加到显示 ms 报表查看器的 asp 页面,该查看器可由 web 浏览器调整大小。报表查看器应占用网页的其余部分减去标题图像。仅报表查看器的代码就可以很好地工作。当我添加标题图像时出现问题。因为它是一个固定的高度,所以它会脱离整个页面,并且不满足类似于 ms 报表管理器的垂直和水平滚动条显示的要求。我尝试了很多技术,包括尝试通过 CSS 来实现,更改 DIV 上的百分比,如果您查看我的代码,我会从一些 Javascript 开始,但不知道还能用它做什么。有一次我认为我已经成功地在报告查看器上方添加一行并将图像放在那里。问题是当 Web 浏览器的宽度开始折叠时,报表查看器的行为被修改了,因为图像不再允许报表查看器折叠。目前我正在尝试 I Frame 并且似乎有一些希望。不管怎样,如果有人能给我发送任何想法、想法、解决方案、明智的建议。我当然会很感激。这是我的代码。今天有一段时间,我坐在办公 table 前,真的不知道该去哪里。我的网络知识有限。 谢谢——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>

最佳答案

Height: 100% 是这里的问题 - 它查看父级的高度,即占据整个 body 标签的表单,并将高度设置为等于该高度。

如果你不愿意使用框架,你可以使用JavaScript设置内容div的大小等于browserHeight - headerHeight,然后在窗口的大小事件中添加一个事件监听器来重新计算和重新应用内容每次浏览器窗口改变尺寸时 div 的高度。

关于javascript - 被 CSS、报表查看器和 Div 计算难住了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7264934/

相关文章:

javascript - 为什么我不能将背景更改为 'true' 或在 Bootstrap 中更改为 'static' 后将其删除?

css - Flexbox,按列包装元素

javascript - 使 div 中的段落中的文本溢出而不是换行

javascript - 来自 Ajax 请求的 HTML 表

html - 尽管有分辨率,图像位置固定

html - 如何使用模板和 Bootstrap 构建响应式 Web?

Javascript 弹出窗口作为单例

javascript - Javascript 中的链接方法错误

javascript - 缩略图图像高度

javascript - jQuery 下拉菜单在单击时变黑