子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高度

回答

相關問題