子div不继承父div高度

我无法让孩子在Chrome中加载时自动继承父div的高度。我创建了下面的例子，当我在jsfiddle中运行它时，它的作用是如何（在Chrome中），但不是当我从Visual Studio运行它时！子div不继承父div高度

不同的是，在我的项目中，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页

<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/

来源

2017-04-21 JQuery

那么它使用Internet Explorer呢？ –

什么使用Internet Explorer？ – JQuery

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

也许这有助于

来源

2017-04-21 10:45:47

谢谢，我应该说我尝试过也没有任何运气。如果我设置了500px的大小，它会增加，但不会继承。 – JQuery

@JQuery尝试使用calc（） –

子div不继承父div高度

回答

相关问题