CSS 100％高度在React應用程序中不起作用

我正在嘗試在我的React應用程序中使用Flexbox來創建佔據完整寬度和高度的簡單雙列網頁。CSS 100％高度在React應用程序中不起作用

我可以通過它自己使用HTML和CSS，但不能在React應用程序中使用。

到目前爲止，我有：

:root { 
    overflow-x: hidden; 
    height: 100%; 
} 

body { 
    min-height: 100% 
} 

.flexbox { 
    height: 100%; 
    display: flex; 
} 

.left { 
    flex: 0 0 200px; 
    height: 100% 
} 

.right { 
    flex: 1 
}

和：

<div class="flexbox"> 
    <div class="left"> 
    Left 
    </div> 
    <div class="right"> 
    Right 
    </div> 
</div>

我意識到我需要在我index.html佔額外<div id="root"></div>標籤，所以我還增加了以下內容我的CSS ：

#root { 
    height: 100%; 
}

而我的render功能：

render() { 
    return (
    <div className="flexbox"> 
     <div className="left">Left</div> 
     <div className="right">Right</div> 
    </div> 
) 
}

但這不起作用。列存在但不是全高。爲什麼不？

來源

2017-10-16 tommyd456

原諒我，如果我聽起來很蠢，但你導入CSS文件吧？ – Dane

是的，我是.'left'和'right'實際上有背景顏色，他們顯示。 – tommyd456

你可以參考這個鏈接： - https：// stackoverflow。com/questions/6654958/make-body-have-100-of-the-browser-height –

Body看起來像它的父級（HTML）如何縮放動態屬性，所以HTML元素也需要設置它的高度。

但是，身體的內容可能需要動態變化。將最小高度設置爲100％將實現此目標。

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
}

來源

2017-10-16 12:02:02

'html'確實有高度 - 請參閱'：root' – tommyd456

記住 - 這個在React之外工作（HTML和CSS） – tommyd456

檢查我的最新編輯。最小高度： - >高度。對我來說工作很好。 –

使用視高臺，CSS：

#root { 
    min-height: 100vh; 
}

來源

2017-10-16 12:11:39 zdolny

我真的很想理解爲什麼我的代碼在React應用程序中不起作用？ – tommyd456

它確實沒有？它應該可以工作，您可以嘗試在「flexbox」類上設置'min-height：100vh;'。它適用於我，也許有些東西會覆蓋你的CSS？ – zdolny

@ tommyd456工作示例：https：//jsfiddle.net/2q73angs/ – zdolny

試試這個：

[data-reactroot] 
 
     {height: 100% !important; }

來源

2017-10-16 12:25:48

你需要設置你的根HTML標記的高度爲100％：

html { 
    height: 100%; 
}

另一種方法是直接設置高度，使用viewport units：

targetelement { 
    height: 100vh; 
}

我懷疑你可能會感興趣在後者，考慮到你對flexbox的傾向。我個人覺得比分層依賴百分比的元素簡單得多。

來源

2017-10-16 12:53:02

'：root'與'html'相同 – tommyd456

你忘了<html>也是一個標籤。而且，它是所有父母的父母！這就是爲什麼你應該給它100％的高度。

html, body { height: 100%; }

來源

2017-10-16 12:59:38 Vitiok

'：root'與'html' – tommyd456

CSS 100％高度在React應用程序中不起作用

回答

相關問題