0

我正在尝试使用包含两列的表格制作一个简单的 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%;
}

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

谢谢，对不起我的英语不好...

4

1 回答 1

0

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

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/

于 2013-10-30T13:32:30.190 回答