Question

当我在chrome中加载它时，我无法让孩子自动继承父div的高度。我创建了下面的例子，当我在jsfiddle中运行它时，它的工作原理是什么（在chrome中），但是当我从visual studio运行它时却没有！

不同的是，在我的项目中，outter标签位于_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 {

}

_Layout page

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

@RndBody（）内容

<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%);
}

也许这有帮助

子div不继承父div高度

1 个答案: