Question

我在页面上添加了Google地图。左侧是菜单，右侧是内容。

我希望左侧（菜单）滚动，但右侧（内容，本例中的地图）不滚动。我不想使用框架或Javascript。

我想用这段代码来做这件事：

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

演示：demo

Answer 1

我经历了并尝试重新格式化并修复了一些元素重叠，以便它更具可读性，我希望这会有所帮助。

另外，我用文本PHP_INSERT_LOCATION_#替换了PHP代码，以便我可以通过验证器运行它，并确保我没有犯任何错误。

你说地图没有出现，这是因为地图高度为100%，导致0，因为正文的唯一其他元素<div id="Menu">为position:absolute; }。由于没有设置身体的高度，身体保持在0的高度。

为了解决上述问题，我已将height:100%;的样式添加到html，body和div.Content中，以使上述元素成为窗口的宽度，否则将尝试占用尽可能少的垂直空间。

此外，Google地图脚本似乎将position:relative;添加到<div id="map">，因此您必须将position:fixed添加到Content div，请参阅下文：

查看此处：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>

Answer 2

好的，这就是你想要的：

<div id="Content" style="position:absolute; top:0px; right:0px; bottom:0px; left:0px; ">
    <div id="map" style="width:100%; height:100%;" ></div>
</div>

在不使用框架的情况下在具有固定内容的页面上滚动菜单

2 个答案: