使用boostrap填充顶部和全高度的显示窗口

Question

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

我有一个body padding-top，无需一直定义容器。 问题是navbar + background-image现在比浏览器窗口大，我有一个滚动条。

我怎么能摆脱滚动条即。 navbar + background-image =浏览器窗口高度，而导航栏后面没有背景图像的一部分。

这是一个小提琴：https://jsfiddle.net/bb61c412/225/

以及相应的代码：

.navbar {
  background-color: #FF0000;
  opacity:0.7;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important; 
}

body {
  margin: 0;
  padding-top: 50px;  
}

#picture{ 
    height: 100vh; 
    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;
}

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />


<div class="navbar navbar-default navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">         
        </div>
     </div>
</div>

<div class="col-sm-8" id="picture">
</div> 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

您可以尝试使用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;
}

Answer 2

问题是图片是ViewHeight的100％ - 在绘制导航栏后;所以：“scroll-height”是导航栏的高度。

要解决这个问题，请尝试设置这两个元素的高度（％或vh），使它们一起不超过100，如下所示：

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

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

Answer 3

使用

body { 
overflow: hidden;
}

这可能有帮助。