Html 引导4背景图像全高，导航栏无滚动

我有一个带有导航栏的页面。 我想在页面（而不是导航栏）中添加一个响应性的背景图像

如果我将页面设置为100%的高度，它将使用滚动条溢出页面

如何做到这一点？我不知道

.bg{
/*使用的图像*/
背景图像：url（“http://via.placeholder.com/350x150");
/*将图像居中并精确缩放*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}

呜呜呜呜

您可以使用Bootstrap 4 flexbox utils，并将

flex:1 auto

添加到

主页

，使其填充高度（无需滚动）

身体{
最小高度：100vh；
}
.柔性填料{
flex:1自动；
}  
.bg{
背景图像：url（“http://placehold.it/350x150");
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}










呜呜呜呜

将以下css规则添加到您的

.bg

类中：

height: calc(100vh - 56px)

这将计算高度（100%视口高度减去导航栏高度的56px）

工作代码段：

.bg{
/*使用的图像*/
背景图像：url（“http://via.placeholder.com/350x150");
/*将图像居中并精确缩放*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
高度：计算（100vh-56px）；
}










呜呜呜呜

这迫使您在两个位置依赖导航栏高度。如果我现在更改导航栏高度，我也必须在这里更改它