position:absoluteすると、親BOXから高さが無くなってしまいますが、絶対指定した位置を親要素に残す方法 or 高さをjQueryなどで取得する方法はありますでしょうか?
javascriptで高さを取得して親boxに指定してあげればいい
ありがとうございます。消えてしまった高さを取得する具体的な方法が検討がつかず、教えていただけるとありがたいのですが・・。
$.height()を知らないんだったら、jQuery使わない方がいい。というか、まず調べろ。
$(’.parent’).height();としてもやっぱり0としか取得できないのですが、どうすればいいのでしょうか・・・。
基礎を勉強しよー。勉強してる上でならわかるけどこれはちょっと…。ググればすぐでてくるしね…。
まずは苦労して取得しないでもCSSだけでほんとにできないのか試行錯誤したほうが勉強になるとおもいます。これだけしか情報がないとほんとに高さを取得する必要があるのかどうかも判断できないです。
"position absolute 高さ 消える"とか"jquery .height() position absolute"などでググって見たのですが、出てきません・・・。
情報が少なくて、申し訳ありません。レスポンシブWEBデザインとはちょっと違うと思うのですが、PCとスマホでhtmlを共有して、レイアウトをデバイスごとに振り分けたいのです。スマホはそのまま縦に並べれば良いのですが、PCの場合は、absoluteで絶対指定してレイアウトにこだわりたい、という意図です。
その場しのぎではなく、基本からしっかり勉強して下さい
厳しいご意見ありがとうございます。すぐに質問すれば解決すると甘い気持ちでいたのは事実だと思います。基本から勉強するのはもちろん大切だと思います、気持ちを改めてこれから時間をかけて0からもう一度勉強したいと思います。
ですが、今困っている事に対して、できればご助言をいただけると非常に助かるのですが・・・。
自社のプログラマーに聞けよ!
身近に聞ける人がいればそうするのがベストなのはおっしゃるとおりですが、残念ながら居ないので、こちらで相談させていただいています。
var h=$("#child").height();$("#parent").height(h);頭使っていこー
position:absolute使うなら、親要素にheightを付ければいいんでは?
heightを付ければ解決するのは分かっていますが、コンテンツによって長さが可変なので、固定のheightは付けられません。
じゃあ、min-heightでいいじゃんって思うんだけど。
基本はこんな感じじゃないですかね。いきなりparentから取ろうとしても、高さ出てないんだから取れません。実際に内容の書いてあるchildrenから高さを取って、その値をparentに指定します。
<div class="parent"> <div class="children" style="position:absolute;"> 本文 </div> </div> --- $(function(){ var h = $('.children').height(); $('.parent').height(h); alert(h);//高さ確認用アラート });
具体的なコードのご指摘、ありがとうございます。子要素が複数あってそれぞれheightや配置がまちまちな場合は、.height()と.top()を足した子要素を比較して、一番長いものをparentに代入するという感じでしょうか?
もうすこしスマートな方法があれば、と思ったのですが、この方法が一番無難ですかね?ありがとうございます。
スマートな方法はあるかもしれないけど、トピ主がどんなものを作りたいのかいまいちわからないからID:LTklLEyqftOnとかID:pHqfxYnz0HSqのような答え方しかできないよ。
みんなの回答 4 件
javascriptで高さを取得して親boxに指定してあげればいい
$.height()を知らないんだったら、jQuery使わない方がいい。というか、まず調べろ。
jQuery API Documentation
http://api.jquery.com/position:absolute使うなら、親要素にheightを付ければいいんでは?
基本はこんな感じじゃないですかね。いきなりparentから取ろうとしても、高さ出てないんだから取れません。実際に内容の書いてあるchildrenから高さを取って、その値をparentに指定します。
<div class="parent">
<div class="children" style="position:absolute;">
本文
</div>
</div>
---
$(function(){
var h = $('.children').height();
$('.parent').height(h);
alert(h);//高さ確認用アラート
});
関連するトピックス