3

誰かのブラウザの高さに関係なく、iframe を動的に Web ページの上部から 150 ピクセルのサイズに変更し、Web ページの下部に移動しようとしています。body の width と height は両方とも 100% に設定され、overflow は非表示になっています。

私の質問がまだ意味をなさない場合は、ここにいくつかのビジュアルがあり ます iframe は常に下部にあり、上部から 150px である必要があり、iframe 内の下部要素のコンテンツを常に表示できる必要があります。

4

3 に答える 3

2

これがJqueryソリューションです：

jsfiddle

Javascript：

$(document).ready(function(){

var winHeight = $(window).height();

var frameHeight = winHeight - 150;

$("#frame").css("height",frameHeight+"px");

});

HTML-css

<iframe id="frame" src="http://goawaymom.com/messages.html"  />

#frame{
position:fixed;
top:150px;
overflow-x:scroll;

}

#frameの位置を修正する必要はありません！

また、関数としてラップし、次のようにウィンドウのサイズ変更を実行することをお勧めします。

$(window).resize(function(){

whateverYouCalledIt();
})
于 2013-01-16T21:25:27.520 に答える
1

$(window).dimension();ウィンドウの寸法を取得するために使用します。$("#my_iframe").css();高さと幅を設定するために使用します。

于 2013-01-16T21:16:24.780 に答える
0

js以外のソリューションが必要な場合は、iframeをdivにラップして、cssを使用してみてください。

div{
    position: absolute;
    top: 150px;
    bottom: 0;
    right: 0;
    left: 0;
}
iframe{
    width: 100%;
    height: 100%;
}
于 2013-01-16T21:21:08.443 に答える