子要素の高さに親要素の高さを合わせたい

現在製作しているサイトで子要素の高さが変わることがあるため、それに応じて
親要素の高さを変えたいと考えております。

子要素：.section
親要素：#post_article

下記の通り、ご覧いただくとはじめに親要素のheightを絶対値で指定していたのですが
NEXTで異なる.sectionが表示されると高さが変わるため、可変にしたいと考えております。

そこで親要素heightを%指定とすることや、heihtを指定しない、またはoverflow:hiddenを
指定する等を検討したのですが、うまく処理することができません。
もともと子要素の中に応じて親要素は可変であるという感覚でいたのですが、
本件の問題点と解決策について、ご助言を賜りたく存じます。

よろしくお願い申し上げます。

css
1#post_article {
2    /* height: 430px!important; */
3    padding-top: 1em;
4}

以下追加

html
1<article id="foo">
2  <fieldset id="bar">
3  </fieldset>
4</article>

css
1
2@media screen and (max-width: 736px){
3#foo{
4    background-color:gray;
5    padding: 1.5em 1.5em 0.1em 1.5em;
6    left: -1.5em;
7    margin: 0 0 2em 0;
8    width: calc(100% + (1.5em * 2));
9}
10}
11
12#bar{
13  height:200px;
14  background-color:pink;
15}

kei344

2018/06/02 13:28

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を提示されたほうが回答を得やすいと思います。

SugiuraY

2018/06/02 13:35

コメントありがとうございます。後々にこれを検索する方のためにもといつもおもうのですが、関連する要素と影響しているスタイルとjsをディベロッパーツールから容易に取得してできたりしますでしょうか？抜粋したコードを以前ご覧に入れた際、全貌をみなければわからないというコメントが多かったため、最近は恥を承知でサイトアドレスを公開しております。私が上手な関連コードの抜粋に明るくないだけの可能性も十分あるので、良い方法があれば是非この機会にご教示ねがいます。

kei344

2018/06/02 13:51

https://teratail.com/help/question-tips#questionTips3-5-1 ＞最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。

SugiuraY

2018/06/02 14:49

質問にできるだけ分かりやすいように抜粋したのですが、動きます。やはりどこかに影響を与えている要素が多岐にわたるため意図的に抜粋すると問題が解決しないような気がします、、、1時間加工を繰り返したのですが、結局複雑に要素を重ねて原因のありえそうなコードを提示しようとするとサイトそのものを提示した方がかえってご覧いただく方に理解が得られやすいとも思いまいした。私自身は見る側の立場になることがほとんどないため、申し訳ございません。再現不能でした。。

kei344

2018/06/02 15:20

問題を解決する上で切り分け作業はとても重要なので、もう少しがんばってみて欲しいのですが･･･。また、「NEXT」はJavaScriptで実装されているのでは？そうであるなら質問タグにそれも増やすほうが見る方も増えるのでは。

SugiuraY

2018/06/02 15:49

コメントありがとうございます。承知を致しました。引き続き、試行錯誤してみようと思います。

yoshinavi

2018/06/02 22:32

親要素の高さを可変とする場合、上手くいかない場合の多くは、親自身の高さが無く、子要素が`float`や`position:absolute;`により、親の高さが無くなってしまう事が原因です。子の要素の状態を把握して、どうやって親の高さを確保するか？が解決策のひとつの方向かと思います。

SugiuraY

2018/06/03 13:32

金言をありがとうございます。子要素のpositionやfloatには十分に注意してまいります

行動規範の内容に同意します

回答2件

ベストアンサー

適当にサイトを見てみただけですが、

.sectionのpositionプロパティを削除
.footer_postの記述を削除
.form-wrapper .sectionにdisplay:noneを追加
.form-wrapper .sectionのmin-heightを削除し、min-height:300pxを.is-activeにかける
.form-wrapper .section.is-activeにdisplay:blockを追加
.main_postのpositionプロパティを削除

以上を行うことで、とりあえず質問者さんの想像する動作になるのではないかとおもいますが、どうでしょうか？

投稿2018/06/02 16:02

s8_chu

総合スコア14731

s8_chu

2018/06/02 16:17 編集

`.div_flex`に`position:absolute`がかかってるので、ここも修正しないといけないかもしれないですね。

SugiuraY

2018/06/03 13:30

コメントありがとうございます。NEXTの動きはJS側で調整が必要ですが、おかげさまでイメージするものができました。それよりも他の方からのコメントにもあるようにpositionの指定によって、親要素等にも影響を及ぼすのですね、、昔、あまりいたずらに使用するなという助言もいただいたこともあったのですが、改めて勉強になりました。重ねて御礼申し上げます。よろしくお願いいたします。

行動規範の内容に同意します