CSS 100% 高度在 React 應用程序中不起作用
[英]CSS 100% height not working in React app
問題描述
我正在嘗試在我的 React 應用程序中使用 Flexbox 創建一個簡單的兩列網頁，該網頁占據整個寬度和高度。
我可以讓它自己處理 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>
)
}
但這不起作用。 列存在但不是全高。 為什么不？
8 個解決方案
解決方案1
18 2018-12-04 16:43:19
如果您使用create-react-app它會向 DOM 添加一個class=App的元素和一個 ID 為root的元素。 他們還應該得到height: 100%
html, body, #root, .App {
height: 100%;
}
解決方案2
9 2017-10-16 12:11:39
在 css 中使用視口高度單位：
#root {
min-height: 100vh;
}
解決方案3
4 2017-10-16 12:59:38
你忘記了<html>也是一個標簽。 而且，它是所有父母的父母！ 這就是為什么你也應該給它 100% 的高度。
html, body { height: 100%; }
解決方案4
3 2017-10-16 12:02:02
Body 會根據其父級 (HTML) 來確定如何縮放動態屬性，因此 HTML 元素也需要設置其高度。
但是 body 的內容可能需要動態更改。 將 min-height 設置為 100% 將實現此目標。
html { height: 100%; } body { height: 100%; }
解決方案5
0 2017-10-16 12:25:48
試試這個：
[data-reactroot] {height: 100% !important; }
解決方案6
0 2020-05-21 14:48:16
在頁面的父 div 中，添加以下 css。
position: fixed;
overflow: auto;
height: 100vh;
解決方案7
0 2020-08-03 17:11:12
或者，如果上面建議的任何內容由於某種原因似乎不起作用，請嘗試使用 normalize.css 包。 它擦除所有瀏覽器提供的 CSS 並為應用程序創建一個新窗口。
"normalize.css": "^8.0.1" //package.json (yarn add or npm install)
import "normalize.css/normalize.css"; //in app.js
然后在 css 文件中將 body 的高度和寬度分別定義為 100vh 和 100vw。
解決方案8
0 2021-09-20 03:09:02
這里有很多答案，但沒有一個有效。 我已經測試了所有這些。 在 react js 中實現最小高度的最佳方法是在應用程序中使用主標簽，然后為該標簽添加最小高度。
您的 App.js 代碼應如下所示。
<React.Fragment>
<Header />
<main>
<Container>
</Container>
</main>
<Footer />
</React.Fragment>
注意如果你想使用空片段，你可以簡單地刪除 React.Fragment。 那么你的代碼應該是這樣的。
<>
<Header />
<main>
//Write your code here
</main>
<Footer />
</>
現在將 CSS 添加到您的 CSS 文件中。
main {
min-height: 80vh;
}
重要事項 您必須牢記幾件事。 您的頁眉和頁腳或組件調用應該在主標記之外。 像代碼一樣，我已經在上面分享了。 我在標簽外調用了頁眉和頁腳。 如果您想使用路由，只需在標簽上方添加路由器即可。 帶有路由和組件調用的代碼應如下所示。
<React.Fragment>
<Router>
<Header />
<main>
<Container>
<Route path='/' component={HomeScreen} exact />
<Route path='/products' component={ProductScreen} />
<Route path='/cart' component={CartScreen} />
<Route path='/login' component={LoginScreen} />
</Container>
</main>
<Footer />
</Router>
</React.Fragment>
高度100％在CSS中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.