質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

5回答

3509閲覧

特定要素の高さ分の数値を別要素のtopの値に追加したい

castail

総合スコア117

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/07/24 03:46

レスポンシブで可変する特定要素の高さ分の数値をリアルタイムで取得し、別要素のtopの値に追加したいです。

具体的には、

lang

1<div class="contents"></div> 2<footer></footer>

という構成でcontentsの高さ分をfooterのstyle属性のtopプロパティの値に追加したいです。

lang

1<div class="contents">contentsの高さが1000pxの場合</div> 2<footer style="top:10000px;"></footer>

レスポンシブレイアウトのため、それぞれの高さは可変しますので値もリアルタイムに変わります。

ご教授のほどよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

javascript

1$(function(){ 2 resizeFunc(); // アクセス時に呼びだす 3 $(window).resize(resizeFunc); // ウィンドウサイズが変わるたびに呼び出す 4}); 5 6function resizeFunc(){ 7 var height = $(".contents").outerHeight(); 8 $("footer").css({"top" : height}); 9}

jQueryだとこんな感じかなと思います。
アクセス時にはリサイズ判定はないのでonloadで関数呼んでやる必要がありましたね。

投稿2015/07/27 00:34

Yasha_Wedyue

総合スコア830

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

castail

2015/07/27 04:52

YuyaKoshimizu様 ご回答ありがとうございました。
guest

0

ベストアンサー

javascript

1function getStyleValue(_elem,_StyleName){ 2 var _Element=_elem; 3 4 if(!_Element){ 5 console.error("Element is null : Elementが存在しません。"); 6 return ""; 7 } 8 var style; 9 if(document.defaultView){ 10 style=document.defaultView.getComputedStyle(_Element,""); 11 }else{ 12 style=_Element[currentStyle].getAttribute(_StyleName); 13 } 14 return style[_StyleName]; 15}; 16function setStyleValue(_elem,_StyleName,_Value){ 17 var _Element=_elem; 18 19 if(!_Element){ 20 console.error("Element is null : Elementが存在しません。"); 21 return ""; 22 } 23 _Element.style[_StyleName]=_Value; 24}; 25 26var contents_height=getStyleValue(document.getElementsByClassName("contents")[0],"height"); 27setStyleValue(document.getElementsByTagName("footer")[0],"height",contents_height);

以上の処理をリアルタイムに変わる際に発生するイベントに結び付けることで可能かと。
(自分のライブラリ作成のために使用して動作確認しているものを適当に弄って持ってきましたので一応動作確認済みですが……)

投稿2015/07/24 21:17

Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

castail

2015/07/27 04:51

Cf_cwd様 ご回答ありがとうございます。 こちらでうまく動作いたしました。 ありがとうございました。
guest

0

可能ならひとつ外側に枠を作って、それをabsoluteにするのが簡単だと思います
コンテンツdivが膨らんでもfooterは自動的にdivの直ぐしたに移動します。

HTML

1<html> 2 <body> 3 ダミー文字列<br/>ダミー文字列 4 <div style="position:absolute;top:30;left:30;background-color:rgba(0,0,255,0.5);"> 5 <div>コンテンツ<br>コンテンツ</div> 6 <footer>フッター</footer> 7 </div> 8 </body> 9</html>

投稿2015/07/24 16:03

編集2015/07/24 16:10
hirohiro

総合スコア2068

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

javascript

1window.onresize = function() { 2 var height = document.getElementsByClassName("contents").clientHeight; 3 var footer = document.getElementsByTagName("footer"); 4 footer.style.top = height; 5}

こんな感じでいいのではないでしょうか。
getElementsByTagNameでfooterが取れるかどうかは確認してないので無理でしたらidかclassをつけてやってください。

投稿2015/07/24 05:33

Yasha_Wedyue

総合スコア830

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

castail

2015/07/24 05:58

ご回答ありがとうございます。 ご教授いただいた記述を試したのですが、うまくいきませんでした。。。footerへクラスを追加してもダメでした。
orange0190

2015/07/24 06:40

横からコメント失礼。 提示されているコードは次のようにしないとダメではないでしょうか。 window.onresize = function() { var height = document.getElementsByClassName("contents")[0].clientHeight; var footet = document.getElementsByTagName("footer"); footer[0].style.top = height; }
Yasha_Wedyue

2015/07/24 08:14

ShunsukeIzuiさん すみません、jQueryばっかり触っていて素のjsの書き方を忘れておりました。 訂正ありがとうございます。
castail

2015/07/24 10:00

ご回答ありがとうございます。 ShunsukeIzuiさんの記述でもやはりうまくいきませんでした。 お手数ですが、jqueryでの記述の場合はどのうようなものになるかご教授頂けませんでしょうか?
guest

0

footerを画面下に貼り付けたいとかならともかくなんですが、そうで無いのでしたらTOPを付けなくてもcontentsの下にfooterは勝手に来ると思いますが、なぜこういう書き方をしてるんですか?

投稿2015/07/24 04:44

landy77

総合スコア1614

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

castail

2015/07/24 05:20

ご回答ありがとうございます。 ご説明が漏れておりました。 今回事情によりcontentsにposition:absoluteが指定されているため、footerにもposition:absoluteを指定する必要があるためです。親要素も追加できないためbottomでの指定ができず、contentsの高さ分topで指定する必要があり上記の通りご質問しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問