【現状】以下の様に.buttonをクリックすると.bottomとその中身の.contentが下からにょきっと表示されるようにしたいのですが、親要素である.bottomをheight:0;にしても子要素はそもそも消えてはくれません。【ご質問】 ●事実そうなのですが、子要素は親要素の高さを引き継がないということなのでしょうか？ ●親要素のheightの高さを変えることで下からにょきっとアクションをcssとJSでつけたいのですが、この場合一般的にどのようなアイデアがありますでしょうか？.contentに高さが残る以上opacity等を0から1に変える動きにしても要素は残ってしまうため他にはdisplayをnoneやらblockにするくらいしか思いつかないのですが、短絡的で他に弊害が生じる可能性もあるため、一般的なアイデアを頂けると嬉しいです。宜しくお願い申し上げます。 [JSFiddle](https://jsfiddle.net/w20znhe8/1/) ```html

content

``` ```css html{ height:100%; width:100%; } body{ height:100%; width:100%; background:blue; } .wrapper{ position:relative; height:100%; width:100%; } .bottom{ position:absolute; bottom:0; height:0%; width:100%; background:red; transition: 0.5s ease } .bottom_after{ height:10%; } .content{ background:yellow; width:10%; } ``` ```Javascript $(function(){ $('.button').on('click',function(){ $('.bottom').toggleClass('bottom_after') }) }) ```

	@@ -1 +1 @@
1	- 子要素は親要素の高さに依存し~~ないので~~しょうか？
1	+ 子要素は親要素の高さに依存してしまう場合

質問編集履歴