0

ここに私が取り組んでいるサイトへのリンクがあります: http://thoughtfi.com/practiceIMR3.html

ブラウザ ウィンドウの長さを拡張し、幅を約 200 ピクセルにして、ブラウザ ウィンドウの残りの部分をマップで埋めるようにサイドバーを取得しようとしています。cssをいじって動作させるのにかなりの時間を費やしましたが、運がありませんでした。マップ div の css を画面のパーセンテージに設定すると、ほとんどのマップが切り取られます。スクローラーの長さを 100% に設定すると、すべての情報が含まれ、ページの長さを拡張するだけの個別のスクロールはありません。

これが私のcssが現在どのように見えるかです：

<style type="text/css">
html, body, #map_canvas {
    width:   800px;
    height:  600px;
}
#sidebar {
    width:200px;
    height:600px;
    overflow:auto;
}
</style>

ここに私の体の重要な部分があります：

<body onload="initialize_page()" style = "height:100%; margin:0">
    <button onclick="hide_markers_kml();">hide</button>
    <button onclick="unhide_markers_kml();">unhide</button>

    <table style="width:100%;">
        <tr>
            <td>
                  <div id="sidebar"></div>
            </td>
            <td>
                  <div id="map_canvas"></div>
            </td>
        </tr>
    </table>
4

1 に答える 1

0

for レイアウトを使用する代わりに、TABLE絶対配置を使用してみてください。たとえば、私のフィドルA simple 100% layoutを参照してください。秘訣は、、、、、またはプロパティを指定してleft、サイドバーとコンテンツを絶対に配置し、必要に応じてブラウザーが幅と高さを自動的に計算できるようにすることです。toprightbottom

デモでは、サイドバーを に設定しleft: 0; width: 200px;、コンテンツを に設定していleft: 200px; right: 0;ます。これにより、幅 200 ピクセルのサイドバー領域が作成され、ブラウザーはコンテンツ領域のページの残りの幅を計算します。

于 2012-08-19T11:33:26.080 に答える