子要素は親要素の高さに依存してしまう場合

【現状】
以下の様に.buttonをクリックすると.bottomとその中身の.contentが下からにょきっと表示されるように
したいのですが、親要素である.bottomをheight:0;にしても子要素はそもそも消えてはくれません。

【ご質問】
●事実そうなのですが、子要素は親要素の高さを引き継がないということなのでしょうか？

●親要素のheightの高さを変えることで下からにょきっとアクションをcssとJSでつけたいのですが、この場合一般的に
どのようなアイデアがありますでしょうか？.contentに高さが残る以上opacity等を0から1に変える動きにしても要素は
残ってしまうため他にはdisplayをnoneやらblockにするくらいしか思いつかないのですが、短絡的で他に弊害が生じる可能性
もあるため、一般的なアイデアを頂けると嬉しいです。

宜しくお願い申し上げます。

JSFiddle

html
1<body>
2  <div class="wrapper">
3  <button class="button">button</button>
4   <div class="bottom">
5    <div class="content">content</div>
6   </div>
7  </div>
8</body>

css
1html{
2   height:100%;
3  width:100%;
4}
5body{
6  height:100%;
7  width:100%;
8  background:blue;
9}
10.wrapper{
11  position:relative;
12  height:100%;
13  width:100%;
14}
15.bottom{
16  position:absolute;
17  bottom:0;
18  height:0%;
19  width:100%;
20  background:red;
21   transition: 0.5s ease
22}
23.bottom_after{
24  height:10%;
25}
26.content{
27  background:yellow;
28  width:10%;
29}
30

Javascript
1$(function(){
2 $('.button').on('click',function(){
3   $('.bottom').toggleClass('bottom_after')
4 })
5})

miyabi_pudding

2019/12/05 06:15

何をどうしたいのかイマイチわかりません。画像でいいので、ボタンを押したときの、現状と、理想の画像も記載していただけませんか？

maguzo

2019/12/05 07:06

JSFiddleに動作を載せているのですが、わかりづらいでしょうか？ buttonを押す前から.content部分が見えてしまっており、これが隠れた状態（height:0）でbuttonを押すと.bottomにheight:10%が与えられるので、.contentもしたから表示されるようにしたいという事になります。 JS Fiddleをご覧いただくと既にcontentの黄色い部分が見えてしまっていると思います。

FiroProchainezo

2019/12/05 09:15

JSFiddleの動きだけ見ての意見ですが、親要素の大きさを変えるというより、子要素の大きさを変えた方がいいのでは？ボタンを押すと高さ0の要素の大きさを高さ100pxにするようなイメージかなと。

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

回答1件

ベストアンサー

heightは継承しません。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/height

そのため今はheightが0の親要素から子要素がハミ出ている状況ですので、.wrapperにoverflow: hiddenを指定してやれば良いと思います。

数字等は適当ですが、以下のようにしてみると同じ状況で期待した動きが出来ていると思います。

動作デモ → https://jsfiddle.net/oft071up/

css
1.wrapper {
2  position: relative;
3  width: 100%;
4  height: 100vh;
5  overflow: hidden;
6}
7
8.wrapper .bottom {
9  position: absolute;
10  left: 0;
11  bottom: 0;
12  width: 100%;
13  height: 0;
14  background: #ccc;
15  transition: height 0.5s;
16}
17
18.wrapper .bottom.bottom_after {
19  height: 100px;
20}
21
22.wrapper .bottom .content {
23  width: 10%;
24  background: #222;
25}