子divが継承していない親divの高さ

Question

親divの高さを自動的に継承するために、chromeで読み込むことができません。私は下の例を作成し、jsfiddleで実行すると、（クロムで）いくつかの方法で動作しますが、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 { 

} 

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

Answer 1

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

おそらくこれは

を支援210