0

下表用于显示地图和一些相关数据（我清理了所有内容以提高可读性）。左边部分是一个“垂直滚动表”。右侧部分是显示谷歌地图的 div。

它现在设置为 500px，我想知道如何让它“填充”可用的屏幕空间。

<div id="maparea">
    <table style="width:100%; position:relative;border-bottom: 1px solid #888888;margin: 0 auto;" >
        <tr>
            <td width="120px">
                <div style="padding : 4px; width : 196px; height:500px; overflow : auto;">
                    <div>
                        <table width="100%" style="border:1px solid #888888;padding : 0px;">
                            <tr>
                                <td style="font-size:xx-small;">
                                    <b>Name: </b> name<br>
                                    <b>Unit ID:</b> this is id<br>
                                    <b>State:</b> IL     <br>
                                </td>
                            </tr>                    
                        </table>
                        <table><tr><td></td></tr></table></div>
                </div>         
            </td>
            <td width="100%" height="100%">
                <div id="googlemaps1" style="width:100%; height:500px;position:relative;margin: 0 auto;"> </div>
            </td>
        </tr>
    </table>
</div>
4

3 回答 3

1

为了垂直拉伸它，您必须将每个嵌套元素从htmldown 设置为 have height: 100%。应该看起来像这样：

html, body, #maparea, table, #googlemaps1 { height: 100%; }

对比：

于 2012-11-06T22:21:16.717 回答
1

您可以使用表格的固定或绝对位置，并使用底部和顶部坐标来固定高度。

table {
 position: absolute;
 top: 0px;
 bottom: 0px;
 width:100%;
}

问候！

于 2012-11-06T22:23:43.083 回答
1

请查看我在下面的这篇文章。您不应该像以前那样使用表格来布局或排列页面。

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

也只是一个提示，您不应该使用内联 CSS 样式，这是非常糟糕的做法，并且将来修改模板和页面非常困难，因此使用类和样式表来定义任何样式和/或布局您的页面。它们更有活力，以后更容易修复。

在这里为您演示干净的编码：http: //jsfiddle.net/nshJH/

使用<div>'s 你可以只使用

float: xxxx;
clear: xxxx;

这是一个干净的流体页面的简单示例，它对它包含的内容是动态的。另请注意，我可以通过 CSS 中的一个位置即时更改任何宽度或文本属性...

于 2012-11-06T23:21:08.397 回答