填充頂部和全部高度的顯示窗口與boostrap

我有一個半透明的導航欄和背景圖像，並且兩者應該是瀏覽器窗口的高度。填充頂部和全部高度的顯示窗口與boostrap

我有一個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>

來源

2016-04-13 michltm

身體{「overflow：hidden;」 } helpfull？ – Shashikala

@Webbie，是的，我沒有想過這個，但它看起來是最簡單和有效的解決方案。也許你應該編輯它作爲答案。 – michltm

你可以嘗試使用鈣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; 
}

來源

2016-04-13 08:40:48

問題是那個e圖片是ViewHeight的100％ - 在導航欄被繪製之後;所以：「滾動高度」是導航欄的高度。

過度來到這個問題，請嘗試造型這兩個元素的高度（％或VH）這樣加在一起不超過100個，像這樣：

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

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

來源

2016-04-13 08:41:15 argon

使用

body { 
overflow: hidden; 
}

這可能有幫助。

來源

2016-04-13 09:20:46 Shashikala

檢查多個屏幕尺寸後，中間屏幕和小屏幕的解決方案存在問題：右列消失。 – michltm

填充頂部和全部高度的顯示窗口與boostrap

回答

相關問題