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%;
}

但始终显示水平滚动条，地图溢出窗口的宽度

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

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/

表格单元格中GoogleMaps的宽度

1 个答案: