我發現了一些針對這個主題的問題，但我仍然沒有設法解決我的問題。我在 Next js 中使用了一個 Layout 組件，它環繞著我的頁面，并在下面包含一個基本的 Header 和一個 Navbar（兩者都具有固定高度）。我的頁面在導航欄下呈現，應該占用螢屏的剩余空間（我使用的是 Tailwind CSS）。我從其他來源匯入了一些全域樣式，例如這個
在 globals.css 中
html,
body,
body > div:first-child,
div#__next,
div#__next > div {
height: 100%;
}
并更接近預期的結果，但它并沒有起到作用，因為我的布局做自己的事情，當我將“h-full”（高度：常規 CSS 中的 100%）應用到我的頁面時，它們當然太大了因為他們上面有導航欄和標題。我覺得解決方案非常簡單，但我正在處理錯誤的元素或錯誤的級別。我應該配置我的布局組件還是同時配置布局和頁面？我已經配置了一個登錄頁面，它不包括標題，而是一個空的 div 作為布局，并且在那里一切正常。如何管理 Header 和 Navbar 的高度以使頁面為“全屏”？
uj5u.com熱心網友回復：
如果您的標題和導航欄有固定高度，那么您可以使用 css calc 定義下面頁面的高度
高度：計算（100vh - 導航欄的高度 標題的高度，單位為 px）
例如你的CSS應該是這樣的
高度：計算（100vh - 50px）
uj5u.com熱心網友回復：
嘗試使用 100vh（視口高度），如果您仍然喜歡使用 height:100%，則應在后面加上 position : absolute/fixed
html,
body,
body > div:first-child,
div#__next,
div#__next > div {
height: 100vh;
}
uj5u.com熱心網友回復：
這是我的解決方案：
布局jsx
// you can adjust width
<div className="max-w-7xl mx-auto px-4">
<Navbar />
// this is the container of children
<div className="fit">
{children}
</div>
</div>
在 global.css 中：
.fit {
// you can adjust 88px
min-height: calc(100vh - 88px);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419395.html
標籤：