CSS親divの高さ：auto、子の高さ100％、高さは0px

Question

私はサイドバーメニューを持っていますが、私はトグルボタンを持っていますが、サイドバーの親divであるDivがあり、ノードパッケージによって「自動」に設定されます。

<div _ngcontent-cle-1="" class="sidebar in collapse" style="overflow: visible; transition-duration: 500ms; height: auto;" aria-expanded="true" aria-hidden="false"> 
</div> 

高さを100％に設定した場合、divは画面の下部に移動します。これは必要な処理です。しかし、そのために強制されている 'オート'のために、高さはアイテム内のアイテムの数だけ高くなります。

これに対処するために、親divの高さを強制的に下げるために子を追加しようとしました。

私はdisplay：tableとdisplay：table-rowのような複数のCSSトリックを試しましたが、divは0pxの高さに何も変わりません。

また、親divクラスに設定されている高さのスタイリングはすべてオーバーライドされます。それは高さを短縮され、別のからスタイリングが衝突しているので、それは別の答えの重複しない

EDITが、この理由は、私がしたかった過乗ることや子要素があることにする100したがって、自動高さのために親を強制的に拡張する必要があります。次回の質問をお読みください。

Answer 1

含むAngular2指令ので、これを解決した。

this._renderer.setElementStyle(this._el.nativeElement, 'height', 'auto'); 

が過乗ってこのCSSの高さだった。

.sidebar { 
    background-color: #0080ff; 
    top: 0; 
    left: 0; 
    padding-top: 50px; 
    height: 100%; 
    float: left; 
    position: fixed; 
    width: 84px; 
} 

ソリューション

.sidebar { 
    background-color: #0080ff; 
    top: 0; 
    left: 0; 
    padding-top: 50px; 
    height: 100% !important; 
    float: left; 
    position: fixed; 
    width: 84px; 
} 

重要！ 100％属性を上書きできないようにします。 @DamianBartosikによって提案されました