html - 表格单元格中 GoogleMaps 的宽度

Question

我正在尝试使用包含两列的表格制作一个简单的 Web 界面:

• 左:宽度 400px
• 右:剩余的可用宽度

我觉得这很简单，但我做不到。这段代码离成功越近

HTML:

<table id="container">
    <tr>
        <td style="width: 20%">
            <div id="sidebar" style="z-index:1;"></div>
        </td>
        <td style="width: 80%">
            <div id="map_canvas" style="z-index:10;"></div>
        </td>
    </tr>
</table>

CSS:

#map_canvas {
    position: absolute;
    min-height: 99%;
    height: auto !important;
    height: 99%;
    _height: 99%;
    width: 80%;
}

但总是出现水平滚动条且 map 溢出窗口宽度

谢谢，抱歉我的英语不好...

Answer 1

滚动条可能用于主体的默认边距以及表格的边框。你可以试试这个

HTML

<table id="container">
    <tr>
        <td style="width:400px">
            <div id="sidebar" style="z-index:1;"></div>
        </td>
        <td>
            <div id="map_canvas" style="z-index:10;"></div>
        </td>
    </tr>
</table>

CSS

* {
  padding:0;
  margin:0;
}
table {
  width:100%;
  border-collapse:collpse;
  border:0 none;
}

查看此演示 http://jsfiddle.net/pTZKa/

编辑

作为您评论的答案:发生这种情况是因为您有 positon:absolute 所以他正在搜索他最近的父级，该父级的非绝对位置声明为已定位。要解决此问题，请在 css 上添加:

 table td {
    position:relative;
}

新演示 http://jsfiddle.net/pTZKa/4/