Question

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

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

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

enter image description here

我理解这对某些人来说可能是微不足道的，但我只是开始使用java脚本，并且感谢任何帮助。

Answer 1

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

Answer 2

尝试使用以下代码..

<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>

计算要占用的元素的可用高度？

2 个答案: