VueJS中如何让背景图填满除导航栏外的整个页面

问题出在#Home元素没有足够高度撑满页面，仅由内部文本元素的高度决定背景图覆盖范围。按以下步骤修改CSS即可实现需求：

• 先清除页面根元素的默认间距，避免出现不必要的留白：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

• 再修改#Home的样式，让它占据除导航栏外的整个视口高度，并优化背景图的显示效果：

.header{
    margin-top: 80px;
}
#Home{
    background-image: url("../Pics/pic1.jpeg");
    /* 让元素高度至少等于视口高度减去导航栏高度（假设导航栏高80px） */
    min-height: calc(100vh - 80px);
    /* 让背景图按比例覆盖整个元素区域 */
    background-size: cover;
    /* 背景图居中显示 */
    background-position: center center;
    /* 移除多余的底部外边距 */
    margin-bottom: 0;
}

如果你的导航栏实际高度不是80px，只需调整calc(100vh - Xpx)中的X为导航栏的真实高度即可。

内容的提问来源于stack exchange，提问作者MAHEEDHAR A