Question

我有一个侧边栏菜单，我有一个切换按钮，但我有一个Div，它是侧边栏的父div，高度设置为＆＃39; auto＆＃39;通过节点包。

<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将移至屏幕底部，这就是所需要的。但是因为＆＃39; auto＆＃39;在被迫的时候，身高只会高达./ / p>中的物品数量

为了解决这个问题，我试图添加一个孩子强制父div的高度到底。

我尝试了多种css技巧，例如display：table和display：table-row，但div无论如何都保持在0px高度。

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

编辑它不是另一个答案的副本，原因是因为它与另一个答案发生了冲突，缩短了高度，我想覆盖它或制作子元素为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;
}

！important属性确保无法覆盖100％属性。由@DamianBartosik建议

CSS父Div高度：auto，子高度100％，但高度为0px

1 个答案: