web-dev-qa-db-ja.com

jQuery .height（）は、オーバーフローを伴うdivで.scrollHeightと同じ値を出力します：auto（IE8）

他の多くの質問をルーティングした後、問題を解決する答えが見つかりませんでした。

Divがオーバーフローしているかどうかを確認するスクリプトを書いています。ただし、jQuery.height()、jQuery.innerHeight()、またはJavaScripts offsetHeightを使用して表示される高さを取得しようとすると。 div全体の値（オーバーフローしている部分を含む）が与えられます。つまり、scrollHeightと同じ値です。

含まれているDIVスタイル：

{
    overflow-x: hidden;
    overflow-y: auto;
    width: 73%;
    bottom: 0px;
    float: left;
    height: 100%;
    top: 0px;
}

JsFiddleでシナリオのモックアップを作成しました： http://jsfiddle.net/Lukedturnbull/L2bxmszv/3/ （スクロールバーを作成するには、プレビュー画面を小さくしてください）

javascriptjqueryhtmlcssinternet-explorer-8
6
Luke Turnbull

jQuery.height()とjQuery.innerHeight()はオーバーフロープロパティとは何の関係もありません。目に見える部分だけでなく、高さも返されます。

コンテンツの高さを知りたい場合は、scrollHeightを使用する必要があります。このscrollHeightは、jQueryを使用する必要のない通常のjavascriptプロパティです。

_document.getElementById("wrapper").scrollHeight;
_

または、jQueryセレクターを使用できます

_$('#wrapper')[0].scrollHeight;
_

動作中のjsfiddleを参照してください： http://jsfiddle.net/scgz7an5/1/

そのことに注意してください

_$('#wrapper').scrollHeight;
_

未定義を返します。

[〜＃〜]更新[〜＃〜]

フローティング要素の最も重要な部分を忘れました。あなたはそれらをクリアするのを忘れました。

このjsfiddleを見てください。これはあなたの編集ですが、フローティング要素がクリアされています。 scrollHeightとjQuery.height()の値が異なります。 _.structureContent_はスクロールバーを備えたものであり、_.content_でも_.width100_でもないことを確認してください。

_.structureContent_には_overflow:auto_があり、表示されるスクロールバーはそこから来ています。

http://jsfiddle.net/L2bxmszv/5/

フローティング要素をクリアするためにこのクラスを追加しました。

_.clearfix:before,
.clearfix:after, {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {
  clear: both; }
.clearfix {
  zoom: 1; }
_

出力は次のとおりです。

_.content
324 for scrollHeight
324 for clientHeight
324 for jQuery.height()
.structureContent
324 for scrollHeight
276 for clientHeight
276 for jQuery.height()
_

フローティング要素とそれらのクリアに関するすばらしい記事をここで参照してください： http://css-tricks.com/all-about-floats/

14
Carlos Calla

表示されているスクロールバーは、実際には.structureContent要素にあり、.contentにはありません。これが、.contentがすべて同じ値を返す理由です。 .contentは切り捨てられません。

1
James Montagne

私は今、私の問題の解決策を見つけましたが、なぜそれがこれを行っているのか完全には理解していません。

これは私が書いたHTMLやコードではなく、スクロールバーが表示されるかどうかを確認するための修正を書いているだけです。しかし、コンテナの親のScrollHeightとHeightを取得すると、問題が解決することがわかりました。 scrollHeightが高さよりも大きいかどうかを比較することで、問題を解決できました。

0
Luke Turnbull