CSS - 親の高さを0に設定しますが、子divはまだ表示されます

コンポーネントを表示したり非表示にするための簡単なアニメーションを作成します。CSS - 親の高さを0に設定しますが、子divはまだ表示されます

#parent { 
 
    height: 0px; 
 
}

<div id="parent"> 
 
    <div id="child">This is some content</div> 
 
</div>

私は0に、親のdivの高さを設定すると、私はまた、可視の子のdivない期待しますが、子供はまだ示します。親の高さが0に設定されていると消えてしまいたい。

何が問題なのですが、何が間違っているのですか？ありがとうございます。

2017-12-26 imrhung

オーバーフローを設定する：親コンテナに隠します。 –

子コンポーネントを親の高さで拡大しますか？ –

@Adeebbasheer：そうですね。私はちょうど親の高さが0であることを望む、子供も見えないはずです。 – imrhung

親オブジェクトにオーバーフロー隠しプロパティを追加します。この方法ではオーバーフローがクリッピングされ、残りのコンテンツは非表示になります（件名の高さが0であるため、残りも0になります）。

#parent { 
    height: 0px; 
    overflow: hidden; 
}

2017-12-27 04:48:06

ありがとうございました！シンプルで機能します。もう少し質問できますか？この方法では、子供はまだページのスペースを消費していますが、スペースを消費しないようにする方法はありますか？ – imrhung

あなたは大胆なリンクやスクリーンショットを与えることができます –

ありがとう、このフィドル：https://jsfiddle.net/v6way9vo/期待どおりに動作します。だから、私が直面している問題はAngular2 と関係していて、期待通りに動かないかもしれません。とにかくありがとう。 – imrhung

答えて