jqueryでページごとのコンテンツの高さを取得したい
- 評価
- クリップ 0
- VIEW 980
解決させたいことは、ページごとにコンテンツの親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' );
});-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
関係ないかもしれませんが、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>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/05/22 13:05
>article の中の div について、閉じタグがひとつ足りないようです。
こちら確認しましたが、</div>ちゃんと入れてあると思うのですが、
どこの記述になりますでしょうか。
2016/05/22 13:13
2016/05/22 13:28
<div class="news-area">の閉じタグが記載漏れがありました。
ありがとうございます！
しかし、高さの位置が解像度によってstart footerの位置が変わってしまいます。
resizeのjqueryを入れないと難しいのでしょうか。
2016/05/22 13:50
「解像度の違うPC」とはスマートデバイスなどのことでしょうか。その場合どのタイミングで位置がおかしくなるのでしょうか。
「求めている位置とは違う場所に」とはどのような場所でしょうか。
> resizeのjqueryを
$( window ).on( 'load resize', function () { /* code */ } );
2016/05/24 12:28
昨日、resizeの処理を追記いたしました。
ありがとうございます。
以下の質問で、高さを正確に出せず、記述に誤りがありますでしょうか。
https://teratail.com/questions/35840
2016/12/17 11:12
おかげさまでクライアント様にも大変喜んで頂けました。
googleの検索ワードで開発環境のURLがヒットしておりまして、
お手数ですが、上記の『2016/05/22 13:13』にご回答いただきました内容の
以下の箇所を削除頂きたくコメントいたしました。
『http://m〜6/』m以降から6/までURLになります。
お忙しい中、大変恐縮ですが、よろしくお願いします。