css - 子div不继承父div高度

Question

当我在 chrome 中加载它时，我无法让 child 自动继承父 div 的高度。我创建了下面的示例，当我在 jsfiddle 中运行它时，它可以正常工作(在 chrome 中)，但当我从 visual studio 运行它时却不行!!

不同的是，在我的元素中，外部标记位于 _layout 页面中，子内容位于 RenderBody() 调用中 - 不确定这是否会有所不同？

.HtmlEditorBodyContainer {
    margin-top: 50px;
    background-color: blue;
    width: 100%;
    height: 80vh;
}

.NewsOutter {
    background-color: green;
    height: inherit;
    width: inherit;
}

.NewsInput {
    border: 5px solid red;
    /*width: 75%;
    height: 25%;*/
}

.NewsCreate {

}

.NewsSideBar {

}

_布局页面

<div class="HtmlEditorBodyContainer">
    @RenderBody()        
</div>

@RenderBody()内容

<div class="NewsOutter">
        <img src="" id="image">
        <div class="NewsInput">

        </div>
        <div class="NewsCreate">

        </div>
        <div class="NewsSideBar">

        </div>
</div>

https://jsfiddle.net/rzLo9cc0/

Answer 1

.NewsOutter {
    background-color: green;
    height: calc(100%);
    width: calc(100%);
}

也许这有帮助