jqueryでページごとのコンテンツの高さを取得したい

Question

解決させたいことは、ページごとにコンテンツの親divの高さを取得し、divの.spacer-btmクラスに与えて、trigger footerの位置を決めているのですが、解像度の違うPCでテストしたときに、trigger footerの位置が変わってしまい、求めている位置とは違う場所にtrigger footerがきてしまいます。

取得の仕方に誤りがあるのか、pxではなくすべて%で取得しないといけないのかご教授いただけますと幸いです。

$(window).load(function () {
  var boxHeight = $('.all').outerHeight(true);
  $('.spacer-btm').css('height', boxHeight  + 'px' );
});

Answer 1

関係ないかもしれませんが、article の中の div について、閉じタグがひとつ足りないようです。HTMLの構造に問題がある場合は挙動が変わる可能性があります。

---

コメントへの返信：

<article id="post-26" class="post-26 news type-news status-publish hentry">
  <div class="news-area">
  <div class="news-left">
   <img src="http://example.com/web/6/wp-content/uploads/2016/05/02.jpg" alt="" />
<img src="http://example.com/web/6/wp-content/uploads/2016/05/info_slide1_03.jpg" alt="" />
  </div><!-- .news-left -->
  <div class="news-right">
  <header class="entry-header">
    <h1 class="entry-title">SUZUKI SEAN SHOSUKE  SOLO EXHIBITION</h1>  </header>
  <div class="news-textarea">
        <p>先週土曜日のオープニングパーティーも大盛況に終わり、4月5日（日）まで3FのNEW ACCIDENTさんでご覧頂けます。是非、足を運んでみてください。</p>
  </div><!-- .news-textarea -->
	<footer class="entry-footer">
		<span class="entry-date">2016 May 3rd</span>
	</footer>
</div><!-- .news-right-->
<!-- Where is .news-area ? -->
</article>

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。
>article の中の div について、閉じタグがひとつ足りないようです。
こちら確認しましたが、</div>ちゃんと入れてあると思うのですが、
どこの記述になりますでしょうか。

[kei344]

追記しました。

[退会済みユーザー]

コードの記載いただきありがとうございます。
<div class="news-area">の閉じタグが記載漏れがありました。
ありがとうございます！

しかし、高さの位置が解像度によってstart footerの位置が変わってしまいます。
resizeのjqueryを入れないと難しいのでしょうか。

[kei344]

すいませんが start footer がみあたりません。また、trigger footer も見当たりません（これは triggerfoot のことかと思い指摘はしていませんでしたが）。
「解像度の違うPC」とはスマートデバイスなどのことでしょうか。その場合どのタイミングで位置がおかしくなるのでしょうか。
「求めている位置とは違う場所に」とはどのような場所でしょうか。

> resizeのjqueryを
$( window ).on( 'load resize', function () { /* code */ } );

[退会済みユーザー]

kei344さま

昨日、resizeの処理を追記いたしました。
ありがとうございます。
以下の質問で、高さを正確に出せず、記述に誤りがありますでしょうか。
https://teratail.com/questions/35840

[退会済みユーザー]

kei344さん、先日はご回答いただき誠にありがとうございました。
おかげさまでクライアント様にも大変喜んで頂けました。

googleの検索ワードで開発環境のURLがヒットしておりまして、
お手数ですが、上記の『2016/05/22 13:13』にご回答いただきました内容の
以下の箇所を削除頂きたくコメントいたしました。
『http://m〜6/』m以降から6/までURLになります。
お忙しい中、大変恐縮ですが、よろしくお願いします。