PureCSS.io菜單和單張頁面高度

我正在嘗試使用頂部的leaflet和purecss水平菜單創建全屏地圖。 Here是使地圖高度達到100％（將父元素也設置爲100％高度）的解決方案。所以現在，我有這樣的事情：PureCSS.io菜單和單張頁面高度

<!-- Menu --> 
<div class="pure-menu pure-menu-horizontal"> 
    <a href="#" class="pure-menu-heading pure-menu-link">map</a> 
    <ul class="pure-menu-list"> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li> 
     <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li> 
    </ul> 
</div> 

<!-- Map --> 
<div id="map"></div>

CSS

body { 
    padding: 0; 
    margin: 0; 
} 

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

的問題是：頁面的高度IST 100％+菜單的高度。因此地圖的一部分在底部被切斷。我使用Firefox的Inspector，並且改變了各種CSS設置無濟於事。我還測試了不同的瀏覽器以排除Firefox的問題。我錯過了什麼？不幸的是，我不是一個CSS的傢伙..

我創建了一個的jsfiddle：http://jsfiddle.net/jygzLf3v/13/

結果窗口滾動的菜單的高度，但應該是「全屏」，包括菜單。感謝您的一些見解。

來源

2015-05-20 duenni

聽起來像是你可以用你的地圖容器#map {height:calc(100% - $HEIGHT_OF_MENU);}大小事情正確，而不是有任何cutoff.Don't忘記你的菜單高度後添加「像素」。

來源

2015-05-20 23:27:21 snkashis

菜單高度在EM給出，所以菜單的高度是不是靜態的（[鏈接]（https://github.com/yahoo/pure/blob/master/src/menus/css /menus-skin.css））。在我的瀏覽器中看起來不錯，可能會更糟嗎？ – duenni

我剛剛意識到calc（）也可以用em來計算。請試試這個。 – duenni

經過測試。只要你不在瀏覽器中使用標準字體或標準字體大小，就會中斷。： -/ – duenni

您只需在樣式表中將overflow: hidden添加到您的body元素即可。

http://jsfiddle.net/jygzLf3v/14/

來源

2015-05-21 06:57:27

這仍然會切斷地圖。我沒有提到它，但我在左下角有一個ZoomControl，它也會被切斷。 http://jsfiddle.net/jygzLf3v/15/ – duenni

PureCSS.io菜單和單張頁面高度

回答

相關問題