CSS高度以百分比表示，不適用於反應

我有一個奇怪的問題。我使用React完全相同的DOM和CSS呈現，並使用純HTML呈現。但是，在div.container的React子項中，如果它設置爲％，則不會獲得適當的高度。它用vh或px設置時效果很好，但我無法使用它們。任何想法爲什麼？以及如何解決這個問題？CSS高度以百分比表示，不適用於反應

div.form label:after, div.wrapper:after, div.container:after { 
 
    display: block; 
 
    content: '.'; 
 
    clear: both; 
 
    height: 0; 
 
    visibility: hidden; 
 
    line-height: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    width: 100%; 
 
    margin: 0; 
 
    min-width: 319px; 
 
    min-height: 479px; 
 
    background-color:black; 
 
} 
 
div.container { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    height: auto; 
 
    max-height: 1368px; 
 
    max-width: 1368px; 
 
    min-width: 319px; 
 
    min-height: 100%; 
 
    position: relative; 
 
    background-color:red; 
 
} 
 
nav { 
 
    width: 82px; 
 
    height: 100%; 
 
    height: 100vh; 
 
    max-height: 1368px; 
 
    float: left; 
 
    z-index: 1000; 
 
    overflow: hidden; 
 
    background-color: #55c7f9; 
 
} 
 
header { 
 
    height: 15%; 
 
    margin: 0 6%; 
 
    float: initial; 
 
    position: relative; 
 
    width: calc(100% - 80px); 
 
    background-color:orange; 
 
} 
 
div.wrapper { 
 
    min-height: calc(100% - 62px); 
 
    height: auto; 
 
    width: calc(100% - 80px); 
 
    float: right; 
 
    background-color:yellow; 
 
} 
 
div.main { 
 
    width: 90%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    margin: auto; 
 
    padding-bottom: 10px; 
 
    height: calc(100% - 158px); 
 
    background-color:green; 
 
}

<body> 
 
    <div class="container"> 
 
    <nav></nav> 
 
    <header></header> 
 
    <div class="wrapper"> 
 
     <div class="main"></div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-03-18 Dune

如果你檢查你的瀏覽器控制檯，你絕對可以看到警告'警告：未知的DOM屬性類。你的意思是className？' – Sachin

我的問題是呈現DOM，而不是反應代碼。在反應中，我使用className，但以％設置高度不起作用。 – Dune

請提供適當的細節：代碼是否呈現DOM或反應代碼，您使用的瀏覽器是否使用了webpack/browserify等。 – Sachin

類的className內部反應。

<body> 
    <div className="container"> 
    <nav></nav> 
    <header></header> 
    <div className="wrapper"> 
     <div className="main"></div> 
    </div> 
    </div> 
</body>

來源

2016-03-18 11:04:56 Ved

對不起，但沒有。我在這裏輸入了DOM，而不是反應代碼。 – Dune

一些建議，可能幫助你..

添加HTML，與身體一起。

html, body { 
    height: 100%; 
}

確保您的包裝正在加載的div具有高度：100％;.在下面的情況下，「root」會需要它。

<body> 
    <div class="root"></div> 
    <script src="./bundle.js"></script> 
</body>

最後一種情況，如果你做這樣的事情：

<div>{this.props.children}</div>

確保你給這個div一個類的名稱，並將其添加到了需要100％的事情列表

來源

2016-08-10 02:19:27 user2465134

這對我有效。只需要將我的反應根元素設置爲100％的高度。 –

CSS高度以百分比表示，不適用於反應

回答

相關問題