W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:COUs1. さんの質問

position:absoluteすると、親BOXから高さが無くなってしまいますが、絶対指定した位置を親要素に残す方法 or 高さをjQueryなどで取得する方法はありますでしょうか?

みんなの回答 4 件

ID:88fdNc さんの回答

javascriptで高さを取得して親boxに指定してあげればいい

ID:DYVB92

ありがとうございます。消えてしまった高さを取得する具体的な方法が検討がつかず、教えていただけるとありがたいのですが・・。

ID:wrb3vd さんの回答

$.height()を知らないんだったら、jQuery使わない方がいい。というか、まず調べろ。

jQuery API Documentation

http://api.jquery.com/
ID:DYVB92

$(’.parent’).height();としてもやっぱり0としか取得できないのですが、どうすればいいのでしょうか・・・。

ID:kq8z8C

基礎を勉強しよー。
勉強してる上でならわかるけどこれはちょっと…。
ググればすぐでてくるしね…。

ID:kq8z8C

まずは苦労して取得しないでもCSSだけでほんとにできないのか試行錯誤したほうが勉強になるとおもいます。これだけしか情報がないとほんとに高さを取得する必要があるのかどうかも判断できないです。

ID:DYVB92

"position absolute 高さ 消える"とか"jquery .height() position absolute"などでググって見たのですが、出てきません・・・。

情報が少なくて、申し訳ありません。
レスポンシブWEBデザインとはちょっと違うと思うのですが、PCとスマホでhtmlを共有して、レイアウトをデバイスごとに振り分けたいのです。
スマホはそのまま縦に並べれば良いのですが、PCの場合は、absoluteで絶対指定してレイアウトにこだわりたい、という意図です。

ID:MkEOFF

その場しのぎではなく、基本からしっかり勉強して下さい

ID:DYVB92

厳しいご意見ありがとうございます。
すぐに質問すれば解決すると甘い気持ちでいたのは事実だと思います。
基本から勉強するのはもちろん大切だと思います、気持ちを改めてこれから時間をかけて0からもう一度勉強したいと思います。

ですが、今困っている事に対して、できればご助言をいただけると非常に助かるのですが・・・。

ID:xZslFP

自社のプログラマーに聞けよ!

ID:DYVB92

身近に聞ける人がいればそうするのがベストなのはおっしゃるとおりですが、残念ながら居ないので、こちらで相談させていただいています。

ID:wrb3vd

var h=$("#child").height();
$("#parent").height(h);
頭使っていこー

ID:pHqfxY さんの回答

position:absolute使うなら、親要素にheightを付ければいいんでは?

ID:DYVB92

heightを付ければ解決するのは分かっていますが、コンテンツによって長さが可変なので、固定のheightは付けられません。

ID:9ro3Ey

じゃあ、min-heightでいいじゃんって思うんだけど。

ID:LTklLE さんの回答

基本はこんな感じじゃないですかね。いきなりparentから取ろうとしても、高さ出てないんだから取れません。実際に内容の書いてあるchildrenから高さを取って、その値をparentに指定します。

<div class="parent"> 
<div class="children" style="position:absolute;"> 
本文 
</div> 
</div> 
--- 
$(function(){ 
  var h = $('.children').height(); 
  $('.parent').height(h); 
  alert(h);//高さ確認用アラート 
});
ID:DYVB92

具体的なコードのご指摘、ありがとうございます。
子要素が複数あってそれぞれheightや配置がまちまちな場合は、.height()と.top()を足した子要素を比較して、一番長いものをparentに代入するという感じでしょうか?

もうすこしスマートな方法があれば、と思ったのですが、この方法が一番無難ですかね?
ありがとうございます。

ID:HCvOQV

スマートな方法はあるかもしれないけど、トピ主がどんなものを作りたいのかいまいちわからないからID:LTklLEyqftOnとかID:pHqfxYnz0HSqのような答え方しかできないよ。

最終更新日:2013-02-05 (45,222 views)

関連するトピックス

ページ上部に戻る