CSS Parent Div height: auto, Child height 100%, but height is 0px

Question

I have a sidebar menu and i have a toggle button, but i have a Div that is the parent div of the sidebar, and the height is set to 'auto' by a Node Package.

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

if the height was set to 100%, the div goes to the bottom of the screen, which is what is needed. But because of 'auto' being forced in then the height only goes as high as the amount of items within the .

To counter this I have tried to add a child to force the height of the parent div to the bottom.

I have tried multiple css tricks such as display: table and display: table-row, but the div just stays at 0px height no matter what.

Also note: any height styling set in the parent div class, just gets over-ridden.

EDIT it is not a duplicate of another answer, the reason for this is because it has clashing styling from another, which is shortening the height, and i wanted to over-ride it or make the child element be 100% height, thus forcing the parent to extend because of the auto height. Please read the question next time.

Possible duplicate of [Auto height on parent container with Absolute/Fixed Children](http://stackoverflow.com/questions/9061520/auto-height-on-parent-container-with-absolute-fixed-children) — Scott, Aug 29 '16 at 08:37
Try setting height with **!important** attribute, this should override *height: auto*. https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/ — Damian Bartosik, Aug 29 '16 at 08:37
Never encourage anyone to use `!important` its a horrible thing! — vivekkupadhyay, Aug 29 '16 at 08:40
@DamianBartosik oh wow ... I cannot believe I forgot about him ... I have been forking the Node Package that was changing the height ... jeez thanks alot I feel silly now, create a reply and I'll tick as correct answer — Jake Groves, Aug 29 '16 at 08:40

score 0 · Answer 1 · answered Aug 29 '16 at 09:45

This was solved because an Angular2 Directive containing :

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

was over-riding the height on this css:

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

Solution

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

The !important attribute makes sure the 100% attribute cannot be overriden. Suggested by @DamianBartosik

CSS Parent Div height: auto, Child height 100%, but height is 0px

1 Answers1