0

1ページに次の3つのIframeがあります。赤いIframeには、スクロール可能なdivが動的に読み込まれる3つの主要な要素が含まれています。

スクロール可能な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 に答える