0

ページにGoogleマップを含めています。左側はメニュー、右側はコンテンツです。

左側（メニュー）をスクロールしたいのですが、右側（この場合はコンテンツ、マップ）はスクロールしません。フレームやJavascriptは使いたくない。

私はこのコードでこれをやりたいです：

<div  id="map" style="width:100%; height:100%; position:fixed;" ></div>

デモ：デモ

4

2 に答える 2

2

読みやすくするために、いくつかの要素の重複を再フォーマットして修正しようとしました。これがお役に立てば幸いです。

また、PHPコードをテキストに置き換えました。PHP_INSERT_LOCATION_#これにより、バリデーターを実行して、間違いを犯していないことを確認できます。

マップが表示されていないとおっしゃいましたが、これは、ボディの他の要素である、が唯一であるため、マップの高さが100%結果として生じるためです。体の高さを設定しているものがないため、体の高さは0のままです。0<div id="Menu">position:absolute;

上記の問題を修正するためにheight:100%;、html、body、およびdiv.Contentにスタイルを追加して、上記の要素をウィンドウの幅にしました。そうしないと、が最小の垂直スペースを占有しようとするためです。

また、Googleマップスクリプトが追加されているように見えるため、代わりにdivに追加する必要がありposition:relative;ます。以下を参照してください。<div id="map">position:fixedContent

ここを見る：http：//jsbin.com/ulalac/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
**** PHP_INSERT_LOCATION_1 *****
<?php echo session_id(); ?>
**** PHP_INSERT_LOCATION_2 *****
<?
$ray=mysql_query("select * from rayon");
while($r=mysql_fetch_object($ray)) {
    echo '<option value="'.$r->rayon.'">'.$r->rayon.'</option>
';
}
?>
-->
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>NN MAP</title>
    <link rel="stylesheet" type="text/css" media="all" href="http://nn-gis.com/mp/css/form.css" />
    <style type="text/css">
    /*<![CDATA[*/
    html,body,div#Content,div#map{height:100%;}
    div#Content{width:100%;position:fixed;}
    /*]]>*/
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script type="text/javascript" src="http://nn-gis.com/mp/js/main.js"></script>
    <script type="text/javascript" src="http://nn-gis.com/mp/js/line.js"></script>
    <script type="text/javascript" src="http://nn-gis.com/mp/js/zoom.js"></script>
</head>
<body onload="load()">
<div id="Content">
    <div id="map"></div>
</div>
<div id="Menu">  
    <fieldset>
        <legend>Control Panel</legend> - <a href="logout.php">Logout</a>
        <br/>- <a href="javascript:void(0);" onclick="window.open('change.php?sid=PHP_INSERT_LOCATION_1','Reservoirs','height=300, width=460,scrollbars=no');">Change Password</a>
    </fieldset> 
    <fieldset>
        <legend>Active Layers</legend>
        <div class="glossymenu">
            <a class="menuitem submenuheader" href="#" >Points</a>
            <div class="submenu">
                <input type="checkbox" id="intake" onclick="boxclick(this,'intake')" checked="checked"/> <label>Intake</label>
                <br/>
                <input type="checkbox" id="reservoir" onclick="boxclick(this,'reservoir')" checked="checked"/> <label>Reservoirs</label>
                <br/>
                <input type="checkbox" id="wps" onclick="boxclick(this,'wps')" checked="checked"/> <label>WPS</label>
                <br/>
                <input type="checkbox" id="wtp" onclick="boxclick(this,'wtp')" checked="checked"/> <label> WTP</label>
                <br/>
                <input type="checkbox" id="wwps" onclick="boxclick(this,'wwps')" checked="checked"/> <label>WWPS</label>
                <br/>
                <input type="checkbox" id="wwtp" onclick="boxclick(this,'wwtp')" checked="checked"/> <label>WWTP</label>
                <br/>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>Active Lines</legend>
        <form action="">
            <select id="rayon" onchange="line();">
                <option value="rayon">Select Rayon</option>
                <option value="rayon">Qebele</option>
            </select>
        </form>
    </fieldset>
    <fieldset>
        <legend>Projects</legend>
        <form action="">
            <select id="countyLocation" onchange="zoom();search();">
                <option value="center">Select Title</option>
                <!--
                PHP_INSERT_LOCATION_2
                -->
            </select>
        </form>
    </fieldset>
    <fieldset>
        <legend>Tables</legend>
            - <a href="javascript:void(0)" onclick="window.open('data/show.php?page=Reservoirs','Reservoirs','height=600, width=660,scrollbars=no')">Reservoirs</a>
            <br/>
            - <a href="javascript:void(0)" onclick="window.open('data/show.php?page=TBL_MAIN_INV','TBL_MAIN_ING','height=600, width=1024,scrollbars=no')">Main investment</a>
            <br/>
            - <a href="javascript:void(0)" onclick="window.open('data/show.php?page=TBL_MAIN_INV_BID','linkname','height=600, width=960,scrollbars=no')">Bidding Procedures</a>
            <br/>
    </fieldset>
    <fieldset>
        <legend>Analysis</legend>
        - <a href="javascript:void(0)" onclick="window.open('backup.php','backup','height=600, width=660,scrollbars=no')">Backup Data</a>
        <br/>
        <br/>  
        <br/>
    </fieldset>              
</div>
</body>
</html>
于 2013-01-06T19:43:23.437 に答える
0

さて、これはあなたが望むものです：

<div id="Content" style="position:absolute; top:0px; right:0px; bottom:0px; left:0px; ">
    <div id="map" style="width:100%; height:100%;" ></div>
</div>
于 2013-01-06T20:45:57.557 に答える