3

contentに合わせて iframe のサイズを変更する必要がありますが、試した高さのプロパティはposition: fixed.

absoluteおよびfixedクラスを持つ 2 つの要素のみを含むドキュメントを想定します。

body { padding: 0; margin: 0; }
.absolute {
    position: absolute;
    height: 100px;
}
.fixed {
    position: fixed;
    height: 200px;
}
  • html.scrollHeight0 (Opera/Firefox のビューポートの高さ)
  • html.offsetHeight0
  • body.scrollHeight0 (Chrome のビューポートの高さ)
  • body.offsetHeight0
  • body.outerHeight0

を追加するとhtml { position: relative; }、html.scrollHeightChrome では 100px になりますが、200px になる値はありません。最初はフロートにも問題がありましたが、に clearfix を追加することで解決しましたbody。

ここで jsbin を作成しました: http://jsbin.com/ehixiq

実際の高さを取得できない場合、最善の回避策は何ですか? サポートする必要があるのは、Opera、Chrome、および Firefox の最新バージョンだけです。

4

2 に答える 2

2

レンダリング後に高さを確実に取得できるため、JavaScriptを使用するのが最善の方法であることがわかりました。最近のプロジェクトでは、ウィンドウの高さ全体を取得するためにjQueryを使用してこれを行いました。

$(document).height()

要素の高さに対して次のようなことを行うことができます。

$('.element2').height($('.element1').height())

アップデート：

$('iframe').height($('iframe').parent().height())
于 2012-07-25T09:09:12.030 に答える
2

私が理解できる唯一の方法は、すべての要素の実際の最下部の位置を取得することでした:

var els = Array.prototype.slice.call(document.body.getElementsByTagName('*'));
var elHeights = [];
for (var i = 0, l = els.length; i < l; i++) {
  elHeights.push(els[i].scrollTop + els[i].offsetHeight);
}
var docHeight = Math.max.apply(Math, elHeights);

ブラウザーは、100 個の要素を持つ DOM で 1 秒あたり 5 ～ 100k の操作を管理します。私の場合、これはほとんどのドキュメントのサイズとほぼ同じです。

于 2012-07-26T13:38:41.137 に答える