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

【问题标题】：Scrolling menu on a page with fixed content without using frames在不使用框架的情况下在具有固定内容的页面上滚动菜单
【发布时间】：2013-01-07 05:08:06
【问题描述】：

我的页面中包含 Google 地图。左侧是菜单，右侧是内容。

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

我想用这段代码做到这一点：

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

演示：demo

【问题讨论】：

Nexs Hax：在“fixed”后加分号？
@MadaraUchiha 最后的分号其实是不需要的，只要正确关闭样式属性或CSS规则即可。

标签： html css

【解决方案1】：

我尝试重新格式化并修复一些元素重叠，使其更具可读性，我希望这会有所帮助。

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

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

为了解决上述问题，我在 html、body 和 div.Content 中添加了 height:100%; 样式，以使上述元素成为窗口的宽度，否则会尽量减少垂直空间。

此外，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>

【讨论】：

好的。感谢您的回答.. 当我把这个标签映射停止工作 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我想要固定内容侧..想要滚动菜单侧。
@brio 我想我有它
小问题：如何平衡这个div？:((
@brio 这可能是另一个问题。我猜这与继承自 nn-gis.com/mp/css/form.css 的样式有关。祝你好运。 :)

【解决方案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>

【讨论】：

尝试添加 style="height:100%; overflow:scroll;"到菜单 div 和“溢出：隐藏；”到身体:)