Bootstrap：在導航欄中填充整個容器減去導航欄高度

在使用Twitter Bootstrap並使用導航欄的頁面上，我想用Google Maps地圖在導航欄下方填充整個容器。爲了完成這個，我添加了下面的CSS。Bootstrap：在導航欄中填充整個容器減去導航欄高度

我將html和body元素的大小定義爲100％，以便將其用於地圖的大小定義。但是，此解決方案會產生一個問題：

地圖的高度現在與整個頁面高度相同，這會導致滾動條，我可以滾動導航欄添加的40像素。我如何將地圖的大小設置爲導航欄的100% - 40px？

#map { 
     height: 100%; 
     width: 100%; 
} 

#map img { 
     max-width: none; 
} 

html, body { 
     height: 100%; 
     width: 100%; 
} 

.fill { 
     height: 100%; 
     width: 100%; 
} 

.navbar { 
     margin-bottom: 0; 
}

爲完整的HTML：

<!DOCTYPE html> 
<html lang="en"> 
     <head> 
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
       <!-- Stylesheets --> 
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
       <link rel="stylesheet" type="text/css" href="css/core.css"> 
     </head> 
     <body> 
       <div class="navbar"> 
         <div class="navbar-inner"> 
         </div> 
       </div> 
       <div class="container fill"> 
         <div id="map"> 
         </div> 
       </div> 
     </body> 
</html>

來源

2012-08-13 Mahoni

你可以解決絕對定位的問題。

.fill { 
    top: 40px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    position: absolute; 
    width: auto; 
    height: auto; 
}

Demo (jsfiddle)

你也可以將導航欄.navbar-fixed-top並以某種方式加入#map元素中的填充或保證金。

來源

2012-08-13 08:47:43 Sherbrow

我說得對，就是這樣，應用程序不再響應，因爲Bootstrap在絕對定位的地圖div上切換其菜單。 – 2014-04-30 15:09:46

@JürgenZornig響應不是一個絕對的狀態。如果這適用於較小/較寬屏幕上的佈局，那麼它的響應速度很快。如果沒有，請投入幾個媒體查詢並使其符合您的需求。 – Sherbrow 2014-05-01 16:26:00

是的，我同意你的看法，但是如果我將Div絕對頂部40px定位，那麼在打開導航欄菜單時，較小屏幕上的標準引導菜單行爲將與我的div重疊。對不起，我只是想找出這個答案符合我的佈局需求。剛剛解決它以另一種方式（與位置：靜態） – 2014-05-01 18:49:24

Bootstrap：在導航欄中填充整個容器減去導航欄高度

回答

相關問題