Question

我尝试使用leaflet和purecss水平菜单创建一个全屏地图。 Here是使地图高度为100％（将父元素设置为100％高度）的解决方案。所以现在，我有这样的事情：

<!-- 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%;
}

问题是：页面高度是100％+菜单的高度。因此，地图的某些部分会在底部被截断。我使用Firefox＆＃39;检查员和更改各种CSS设置无济于事。我还测试了不同的浏览器以排除Firefox的问题。我错过了什么？不幸的是，我不是一个CSS人..

我创建了一个JSFiddle：http://jsfiddle.net/jygzLf3v/13/

结果窗口可以滚动显示菜单的高度，但应该是＆＃34;全屏＆＃34;包括菜单。感谢您的一些见解。

Answer 1

听起来你可以在地图容器上使用#map {height:calc(100% - $HEIGHT_OF_MENU);}来正确调整大小，而不是有任何截止。不要忘记在菜单高度后添加'px'。

Answer 2

你可以简单地在样式表中将overflow: hidden添加到你的body元素。

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

PureCSS.io菜单＆amp;宣传单页面高度

2 个答案: