解決 Node-RED Dashboard 2.0 中 .v-application__wrap 高度與背景延伸不一致問題
您提到的這組 CSS：
.v-application__wrap {
backface-visibility: hidden;
display: flex;
flex-direction: column;
flex: 1 1 auto;
max-width: 100%;
min-height: 100vh;
min-height: 100dvh;
position: relative;
}
這段樣式來自 Vuetify 3，主要負責管理整個應用的高度與佈局。當 min-height 設為 100vh 或 100dvh 時，確實會出現您所描述的問題：當內容超過視窗高度時，背景未正確延伸，導致滾動後出現白底。
✅ 解決方案：覆蓋 .v-application__wrap 的樣式
為了修正這個問題，您可以使用以下 CSS 來覆蓋該樣式，確保背景與滾動一致。
🚀 1️⃣ 修正 CSS（建議使用）
/* 調整 v-application__wrap，確保背景延伸至內容底部 */
.v-application__wrap {
min-height: auto !important; /* 移除固定的最小高度 */
height: 100% !important; /* 高度跟隨內容自動調整 */
background-color: #f0f0f0 !important; /* 根據需求調整背景色 */
}
/* 確保 body 與 app 的背景一致 */
html, body, #app {
height: 100%;
background-color: #f0f0f0 !important;
margin: 0;
padding: 0;
overflow: auto;
}
/* 確保內容容器自動延伸 */
#app > .v-application {
min-height: 100%;
display: flex;
flex-direction: column;
}
🎯 2️⃣ 針對滾動行為的修正
如果滾動時仍出現白底，可以進一步針對滾動行為進行調整：
/* 確保滾動區域的背景色一致 */
.v-main {
background-color: #f0f0f0 !important;
min-height: 100%;
display: flex;
flex-direction: column;
}
/* 修正滾動時的白底問題 */
.v-main__wrap {
flex: 1 1 auto;
background-color: transparent !important;
min-height: 100%;
}
📦 3️⃣ Vue 組件中動態調整（進階）
如果需要在 Vue 組件中動態調整，您可以在 mounted() 階段進行高度修正：
mounted() {
this.adjustWrapHeight();
window.addEventListener('resize', this.adjustWrapHeight);
},
methods: {
adjustWrapHeight() {
const wrap = document.querySelector('.v-application__wrap');
const content = document.querySelector('.portfolio-wrap');
if (wrap && content) {
wrap.style.minHeight = `${content.scrollHeight}px`;
}
}
},
unmounted() {
window.removeEventListener('resize', this.adjustWrapHeight);
}
⚠️ 注意事項
- 優先順序： 由於
.v-application__wrap 來自 Vuetify，請務必使用 !important 來確保覆蓋成功。
- RWD 考量：
100vh 在不同裝置上可能會有差異，特別是在行動裝置上，建議使用 100% 或動態調整。
- 效能： 若頁面內容大量變動，建議搭配
resize 事件進行優化，避免過度觸發 DOM 操作。
✅ 總結
- 核心問題：
.v-application__wrap 的 min-height: 100vh 限制了背景延伸。
- 解決方案： 調整為
min-height: auto 或 height: 100%，並確保背景色覆蓋整個應用。
- 進階優化： 搭配 Vue 的
mounted() 進行動態高度調整，確保一致性。
這些方法應能有效解決滾動後出現白底的問題！ 🚀