0

我在一个页面上有以下三个 iframe。红色 Iframe 包含 3 个主要元素，其中可滚动 div 是动态加载的。

我想在加载到一定数量时设置可滚动 div 的高度，以便它不会将按钮推出用户视图。

我必须考虑 jQuery 选项卡高度和按钮高度以及窗口/Iframe 高度然后执行scrollableDivHeight = (windowHeight-jqueryTabsHeight-buttonsHeight).

在此处输入图像描述

我知道这对某些人来说可能是微不足道的，但我刚刚开始使用 java-script，任何帮助表示赞赏。

4

2 回答 2

0

检测浏览器窗口的可用高度可能很棘手（即取决于浏览器）。看看这个教程： http: //www.howtocreate.co.uk/tutorials/javascript/browserwindow。您可能还需要为按钮和选项卡设置固定高度。

于 2012-08-24T11:06:58.783 回答
0

试试下面的代码..

<script type="text/javascript" >
    $(window).load(function(){ // Window load .. to ensure that images are loaded from header and footer part, then the body part is resized
            var winW = 630, winH = 460;
                if (document.body && document.body.offsetWidth) { 
                 //Internet Explorer (backward-compatibility mode):
                 winW = document.body.offsetWidth;
                 winH = document.body.offsetHeight;
                }
                if (document.compatMode=='CSS1Compat' &&
                    document.documentElement &&
                    document.documentElement.offsetWidth ) {
                //Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
                 winW = document.documentElement.offsetWidth;
                 winH = document.documentElement.offsetHeight;
                }
                if (window.innerWidth && window.innerHeight) {
                 // most other browsers – as well as IE9 (standards mode):
                 winW = window.innerWidth;
                 winH = window.innerHeight;
                }

            var headerHeight = $("#head").outerHeight(true); // include margin  
            var footerHeight = $("#foot").outerHeight(true); // include margin
            var extraBitForIe8 = 0; 
            if($.browser.msie && $.browser.version==8)
                extraBitForIe8= 4; // For ie 8, to avoid scroll bar
            var bodyHeight = winH - headerHeight - footerHeight - extraBitForIe8 
            $("#body").height(bodyHeight);
        })        
    </script>


    </head>
    <body  >
        <div id="head" style="background:red; margin:10px; padding:10px; color: white" >Header content goes here <br> Header content goes here <br> Header content goes here</div>
        <div id="body" style="background:black; color:white; margin:0 10px; padding:0 10px;"  >Body content goes here <br>Body content goes here  <br> Body content goes here </div>
        <div id="foot"  style="background:yellow; margin:10px; padding:10px;" >Footer content goes here <br> Footer content goes here <br> Footer content goes here</div> 
    </body>
于 2012-08-24T11:40:46.427 回答