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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

5878閲覧

absoluteの時に親の高さを動的にしたい

ry2000

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/01/04 06:03

下記のコードは子がabsoluteの時に親の高さが死んでしまうので
親にpadding-topを設定し高さを指定しているコードです。

このコードでは子の高さが可変だった場合親の高さがheight:100%で固定になってしまいます。
子の高さが可変だった場合に親の高さを可変にする方法はあるでしょうか
例 innerが高さ300pxの時は親も300pxにしたい

<div class="box ratio-1_1"> <div class="inner"> <p>1 : 1</p> </div> </div> <style> .box { position: relative; width: 50%; height: auto; background: #444; } .ratio-1_1:before { content: ""; display: block; padding-top: 100%; /* 1:1 */ } .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:red; } </style>

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

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

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

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

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

yoshinavi

2019/01/04 08:28

レスポンシブ対応が前提なのでしょうか?
ry2000

2019/01/07 00:12

レスポンシブではありませんが z-indexを使って上にレイアウトが重なることを想定しています
yoshinavi

2019/01/07 00:18

「.ratio-1_1:before」の目的は?
ry2000

2019/01/07 00:21

親にpadding-topを設定し高さを指定しているコード このコードでは子の高さが可変だった場合親の高さがheight:100%で固定になってしまうのでどうすればよいのかという質問になります
yoshinavi

2019/01/07 00:36

どこにz-indexを使用するのでしょうか?
guest

回答2

0

子の高さが可変だった場合に親の高さを可変にする方法はあるでしょうか

提示のコードから行くと
①CSS「.ratio-1_1:before」→ 全部削除
②CSS「.inner」プロパティ「position: absolute;」「top: 0;」「 left: 0;」→ 削除


質問者さんの意図と違うかもしれませんが、結論的には、「think49」さんの回答と同じになります。

CSS

1.box { 2 position: relative; 3 width: 50%; 4 height: auto; 5 background: #444; 6} 7 8.inner { 9 width: 100%; 10 height: 300px; 11 background:red; 12}

投稿2019/01/07 00:34

yoshinavi

総合スコア3521

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

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

ry2000

2019/01/07 00:47

absoluteはz-indexで上にレイアウトを重ねることを想定しているので必要です
yoshinavi

2019/01/07 01:06

上にレイアウトを重ねるのであれば、その重ねる要素に、「absolute」と「z-index」を設定すれば良いのでは?
guest

0

position: absolute を指定しなければ、ご希望の動作になります。

Re: RyuuYamazaki さん

投稿2019/01/04 07:56

編集2019/01/04 07:57
think49

総合スコア18156

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

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

ry2000

2019/01/07 00:12

z-indexを使って上にレイアウトが重なることを想定しているのでabsoluteは必要です
think49

2019/01/12 07:12 編集

CSSにおいて、position値が異なる要素の高さを引き継ぐ事は出来ません(フローが異なりますので)。 固定値で指定するか、JavaScriotで高さを取得して下さい。 JavaScript利用なら、JavaScript無効でも最低限のレイアウト確保があった方がベターです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問