1

リーフレットとその上に純粋な水平メニューを 備えたフルスクリーン マップを作成しようとしています。マップの高さを 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

overflow: hiddenスタイルシートで body 要素に追加するだけです。

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

于 2015-05-21T06:57:27.203 に答える