1

我正在尝试创建一个带有传单的全屏地图，并在其上添加一个purecss水平菜单。 这是使地图高度为 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 的 Inspector 并更改了各种 CSS 设置，但无济于事。我还测试了不同的浏览器以排除 Firefox 的问题。我错过了什么？不幸的是，我不是 CSS 人..

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

结果窗口可以滚动到菜单的高度，但应该是“全屏”，包括菜单。感谢您的一些见解。

4

2 回答 2

1

Sounds like you could use #map {height:calc(100% - $HEIGHT_OF_MENU);} on your map container to size things up properly, and not have any cutoff.Don't forget to add 'px' after your menu height.

于 2015-05-20T23:27:21.587 回答
1

您可以简单地overflow: hidden在样式表中添加到您的正文元素。

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

于 2015-05-21T06:57:27.203 回答