レスポンシブで可変する特定要素の高さ分の数値をリアルタイムで取得し、別要素の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ページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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
総合スコア830
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
総合スコア730
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
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総合スコア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
総合スコア830
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/24 05:58
2015/07/24 06:40
2015/07/24 08:14
2015/07/24 10:00
0
footerを画面下に貼り付けたいとかならともかくなんですが、そうで無いのでしたらTOPを付けなくてもcontentsの下にfooterは勝手に来ると思いますが、なぜこういう書き方をしてるんですか?
投稿2015/07/24 04:44
総合スコア1614
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/27 04:52