Question

以下是我正在处理的网站的链接：http://thoughtfi.com/practiceIMR3.html

我试图让侧边栏扩展浏览器窗口的长度，宽度约为200px，然后让地图填充浏览器窗口的其余部分。我花了很多时间搞乱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>

Answer 1

尝试使用绝对定位，而不是使用TABLE进行布局。例如，请看我的小提琴，A simple 100% layout。诀窍是绝对定位侧边栏和内容，指定left，top，right或bottom属性，并让浏览器自动计算所需的宽度和高度

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

如何使侧边栏适合窗口和谷歌地图以适应屏幕的其余部分？

1 个答案: