Html 用垫板垫起显示窗口的顶部和全高

我有一个半透明的导航栏和一个背景图像，两者一起应该是浏览器窗口的高度

我有一个身体填充顶部不必定义一个容器的所有时间。 问题是导航栏+背景图像现在比浏览器窗口大，我有一个滚动条

如何摆脱滚动条，即导航栏+背景图像=浏览器窗口高度，而不在导航栏后面保留部分背景图像

这是一把小提琴：

以及相应的代码：

.navbar{
背景色：#FF0000；
不透明度：0.7；
边界：0！重要；
盒影：无！重要；
-网络工具包盒阴影：无！重要；
}
身体{
保证金：0；
填充顶部：50px；
}
#图片{
高度：100vh；
背景图像：url（“http://cdn.arstechnica.net/wp-content/uploads/2012/10/06_Place_20773_1_Mis.jpg"); 
背景重复：无重复；
背景尺寸：封面；
背景位置：底部中心；
}

---

您可以尝试使用calc css功能：

#picture{ 
    height: calc(100vh - 50px); 
    background-image: url("http://cdn.arstechnica.net/wp-content/uploads/2012/10/06_Place_20773_1_Mis.jpg"); 
    background-repeat: no-repeat;
    background-size:cover;
    background-position: bottom center;
}

---

您可以尝试使用calc css函数：

#picture{ 
    height: calc(100vh - 50px); 
    background-image: url("http://cdn.arstechnica.net/wp-content/uploads/2012/10/06_Place_20773_1_Mis.jpg"); 
    background-repeat: no-repeat;
    background-size:cover;
    background-position: bottom center;
}

---

问题是，在绘制导航条后，图片是ViewHeight的100%；所以：“滚动高度”是导航条的高度

若要解决此问题，请尝试设置这两个元素的高度（%或vh）的样式，使其总和不超过100，如下所示：

.navbar
{
    /* other properties here */
    height: 15%;
}

#picture
{
    /* other properties here */
    height: 85%;
}

---

问题是，在绘制导航条后，图片是ViewHeight的100%；所以：“滚动高度”是导航条的高度

若要解决此问题，请尝试设置这两个元素的高度（%或vh）的样式，使其总和不超过100，如下所示：

.navbar
{
    /* other properties here */
    height: 15%;
}

#picture
{
    /* other properties here */
    height: 85%;
}

使用

这可能会有帮助。

使用

---

这可能会有帮助。

是body{“overflow:hidden；”}helpfull吗？@Webbie，是的，我没有想到这一点，但它看起来是最简单、最有效的解决方案。也许你应该编辑它作为一个答案。body{“overflow:hidden；”}helpfull吗？@Webbie，是的，我没有想过这个问题，但它看起来是最简单、最有效的解决方案。也许您应该将其编辑为答案。检查多个屏幕尺寸后，此解决方案在中屏幕和小屏幕上存在问题：右列不显示。检查多个屏幕尺寸后，此解决方案在中屏幕和小屏幕上存在问题：右列不显示。