Question

下表用于显示地图和一些相关数据（为了更好的可读性，我清理了所有内容）。左侧部分是“可垂直滚动的表格”。右边的部分是显示谷歌地图的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>

Answer 1

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

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

对比：

Answer 2

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

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

问候！

Answer 3

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

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

同样只是一个提示，你不应该使用内联CSS样式，这是非常糟糕的做法，并且将来很难修改模板和页面，所以使用类和样式表来定义任何样式和/或布局你的网页。它们更具动态性，以后更容易修复。

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

使用<div>，你可以使用

float: xxxx;
clear: xxxx;

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

如何让我的表格根据屏幕分辨率自动调整高度

3 个答案: