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

TABLE尝试使用绝对定位，而不是使用for 布局。例如，看我的小提琴，一个简单的 100% 布局。诀窍是绝对定位侧边栏和内容，指定left、top、right或bottom属性，并让浏览器在需要时自动计算宽度和高度。

在演示中，我将侧边栏设置为left: 0; width: 200px;，内容设置为left: 200px; right: 0;. 这会创建一个 200px 宽的侧边栏区域，并且浏览器会为内容区域计算页面的剩余宽度。

于 2012-08-19T11:33:26.080 回答