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菜单和单张页面高度

回答

相关问题