如何让我的表自动调整高度屏幕分辨率 [英] how can I make my table auto-adjust the heigth besed on the screen resolution

问题描述

下表用于显示地图和一些相关数据（为了更好的可读性，我清理了一切）。左侧部分是可垂直滚动的表。右边的部分是一个显示google地图的div。

The table below is used to display a map and some relevant data( I cleaned everything for better readability). The left part is a "vertically scrollable table". The right part is a div that shows the google map.

现在设置为500px，我想知道如何让它填充

It is set to 500px now and I am wondering how can I make it "fill" the available screen real-estate.

<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>

推荐答案

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

Please check out this article i have below. You should not be using tables to layout or grid up your pages as you have done.

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

同样只是一个提示，你不应该使用内联CSS样式，这是非常糟糕的做法，使修改模板和页面在将来非常困难，所以使用类和样式表来定义任何样式和/或布局for yout pages。

Also just a hint as well, you shouldn't be using inline CSS styles it is very bad practice and makes modifying templates and pages very difficult in the future so use classes and a stylesheet to define any styles and/or layouts for yout pages. They are more dynamic and much easier to fix later on.

您可以在这里演示清晰的程式码： http://jsfiddle.net/nshJH/

Demo of clean coding for you here: http://jsfiddle.net/nshJH/

使用< div> 你可以使用

float: xxxx;
clear: xxxx;

这是一个简单的例子，清楚的流体页面是动态的，它包含的内容。还请注意，我可以改变任何宽度或文本属性在飞行中的一个地方在我的CSS ...

This is a simple example of a clean fluid page for you that is dynamic to the content it contains. Also please note that i can change any of the width or text properties on the fly through one place in my CSS...

这篇关于如何让我的表自动调整高度屏幕分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！