Twitter Bootstrap：100％容器高度的容器

使用twitter引導（2），我有一個簡單的頁面導航欄，並在container內我想添加一個100％高度的div（到底部的屏幕）。我的css-fu很生鏽，我無法解決這個問題。Twitter Bootstrap：100％容器高度的容器

簡單的HTML：

<body> 
    <div class="navbar navbar-fixed-top"> 
    <!-- Rest of nav bar chopped from here --> 
    </div> 
    <div class="container fill"> 
    <div id="map"></div> <!-- This one wants to be 100% height --> 
    </div> 
</body>

當前CSS：

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

html, body { 
    height: 100%; 
} 

.fill { 
    min-height: 100%; 
}

編輯*

如下建議我增加高度，以填充類。但是，問題在於我在主體上添加了一個填充頂部來解釋頂部的固定導航欄。這會影響「地圖」div的100％高度，並且意味着滾動條被添加 - 如下所示：http://jsfiddle.net/S3Gvf/2/任何人都可以告訴我如何解決？

來源

2012-07-26 Matt Roberts

所以你只是想在所有方向拉伸該div？ – 2012-07-26 21:04:15

是的，我希望它填寫導航div – 2012-07-27 22:17:11

設置類.fill到height: 100%

.fill { 
    min-height: 100%; 
    height: 100%; 
}

JSFiddle

（我把一個紅色的背景#map所以你可以看到它佔據了100％的高度）

來源

2012-07-26 21:07:16 Horen

後留下的空間謝謝，稍後再嘗試並報告回來。不能相信我錯過了那個簡單的修復:) – 2012-07-27 12:38:08

謝謝，這類作品，但twitter bootstrap導航，這是固定的位置，使地圖底部 - 你需要滾動到底部。我不知道如何使div跨度到整個可用屏幕空間減去導航欄。 – 2012-07-27 22:16:32

你可以將你的導航欄添加到jsfidlle，這樣我就可以看到問題了嗎？ – Horen 2012-07-28 00:35:03

你需要添加填充-top to「fill」element，plus add-size：border-box - sample here bootply

來源

2015-08-17 13:34:33 mamezito

Twitter Bootstrap：100％容器高度的容器

回答

相關問題