2

ページが読み込まれたときとウィンドウのサイズが変更されたときに、Webページ上のいくつかのdiv要素のサイズを変更するスクリプトを作成しました。問題は、クロムをウィンドウからフルスクリーンに変更すると（F11フルスクリーンモードが端から端まで移動するという意味ではありません）、divのごく一部が見えなくなることです。他のブラウザでは発生しません。Chromeの最新リリースを実行しています。

この問題が発生しているdivは#black_line_bottomであり、右下隅に#bottom_containerdivが表示されます。

サイズ変更（js）のコード：

function calcHeight(factor){
if($(window).height() > 720){
    return $(window).height() * factor / 100;
}
else{
    return 720 * factor / 100;
}
}

function getEl(x){
return document.getElementById(x)
}

function resizeHeight(){
var height = calcHeight(3.5);
getEl("black_line_bottom").style.height = height + "px";
getEl("white_line_bottom").style.bottom = height + "px";
height = calcHeight(7.8);
getEl("bottom_container").style.height = height + "px";
getEl("white_line_bottom").style.height = (height - calcHeight(3.5)) + "px";
height = calcHeight(20.5);
};

$(window).on( "resize ready" , resizeHeight);

html：

<body>
    <div id = "bottom_container" >
        <div id = "black_line_bottom" class = "black_line">

        </div>
        <div id = "white_line_bottom"class = "white_line">

        </div>
    </div>
</body>

css：

.black_line {
position : fixed;
background-color : #0a0a0a;
width : 100%;
height : 41px;
left : 0px;
right : 0px;
}

#black_line_bottom {
bottom : 0px;
}

#bottom_container {
position : fixed;
width : 100%;
height : 90px;
left : 0px;
right : 0px;
bottom : 0px;
}

.white_line {
position : absolute;
background-color : red;
width : 100%;
height : 100%;
left : 0px;
right : 0px;
}

#white_line_bottom {
bottom : 41px;
}
4

1 に答える 1

1

私はいくつかの調査を行いましたが、それはクロムのバグのようです。

バグへのリンク： http ：//code.google.com/p/chromium/issues/detail？id = 151623

于 2012-11-02T17:15:10.370 に答える