3

リストを表示するサイドバーを右側に配置して、Google マップの div を配置しようとしています。ウィンドウがスクロールせず、画面のサイズ変更時にページの内容が流動的になるようにしたい。

私は以前、次のようなボックスサイジングを使用しようとしました:

    #map-wrapper * {
     box-sizing: border-box !important;
     -moz-box-sizing: border-box !important;
     -khtml-box-sizing: border-box !important;
     -webkit-box-sizing: border-box !important;
     -ms-box-sizing: border-box !important;
    }
    #map-container {
     position: absolute;
     width: 100%; height: 100%;
     margin: 0;
     overflow: hidden;
     border-top: 50px solid transparent !important; border-right: 350px solid transparent !important;
    }

サイドバーにスクロール リストを表示しようとすると、これが悪夢になり始めます。誰かが良い解決策を持っていますか、それとも私はボックスサイジングで正しい軌道に乗っていますか?

4

2 に答える 2

0

ボックスのサイズ設定は、このようなものでは純粋にオプションです。それを実行する方法はたくさんありますが、IE6のような古いブラウザーでうまく機能するシンプルな方法が1つあります。

作成しようとしているさまざまなフレーム（サイドバーとGmaps /コンテンツフレーム）に対して、を設定するcssルールを作成しますposition:absolute; overflow:auto;。これで、CSS絶対測位のクールなトリックを利用できます。topとbottomCSSの両方を設定すると、高さが自動的に計算されます。左/右を使用した幅についても同じことが言えます。したがって、2つのdivを100％の高さに設定しtop: 0; bottom:0;ます。

サイドバーの幅を300ピクセルにして右側に固定する場合は、を設定しwidth:300px; right:0;ます。コンテンツdivには、を設定しright:300px; left:0;ます。

次に、本体のスクロールバーが表示されないようにする必要があります。まず、デフォルトのマージン/パディングを0に設定して本文から削除する必要があります。また、htmlとbodyをheight:100%;（100％は表示領域の高さに等しい）に設定する必要があります。そうしないと、デフォルトでautoどちらになりますか。コンテンツの高さ。overflow:hidden一部のブラウザは`body{height：100％;}はスクロールバーを表示する必要があることを意味すると考えるため、bodyに追加することも賢明です。

これがJSフィドルの簡単なモックアップで、これがどのように機能するかを示しています。

于 2013-03-04T05:00:13.187 に答える
0

Elimn の提案は私にはうまくいきませんでしたが、次のようにしました (Google マップの上にヘッダー バーを作成しました)。

body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
#map-canvas { height: 100%; overflow: auto; }

体内で：

<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div>
<div id="map-canvas"></div>
于 2013-12-01T03:11:30.390 に答える