CSS Parent Div高度：自动，儿童高度100％，但高度为0px

我有一个侧边栏菜单，我有一个切换按钮，但我有一个div是侧边栏的父div，并设置高度由节点包“自动”。CSS Parent Div高度：自动，儿童高度100％，但高度为0px

<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的高度到底部。

我已经尝试过多个CSS技巧，比如display：table和display：table-row，但div只是停留在0px高度，不管怎么样。

另请注意：在父级div类中设置的任何高度样式都会被覆盖。

编辑它不是重复的另一个答案，其原因是因为它有另一个冲突的风格，这是缩短高度，我想超过它或使子元素为100 ％高度，因此强制父母因自动身高而延长。请在下次阅读这个问题。

来源

2016-08-29 Jake Groves

可能的重复[自动高度与父母容器与绝对/固定儿童]（http://stackoverflow.com/questions/9061520/auto-height-on-parent-container-with-absolute-fixed -children） – Scott

尝试使用**！important **属性设置高度，这应该覆盖* height：auto *。 https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/ –

永远不要鼓励任何人使用'！important'这是一件可怕的事！ – vivekkupadhyay

这是无法解决的，因为含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

来源

2016-08-29 09:45:30

CSS Parent Div高度：自动，儿童高度100％，但高度为0px

回答

相关问题