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

垂直方向に伸ばすには、ネストされたすべての要素を下からhtml下に設定する必要があり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スタイルを使用しないでください。これは非常に悪い習慣であり、将来的にテンプレートやページを変更するのが非常に難しくなるため、クラスとスタイルシートを使用して、YouTubeのページのスタイルやレイアウトを定義します。それらはより動的で、後で修正するのがはるかに簡単です。

ここであなたのためのクリーンなコーディングのデモ：http：//jsfiddle.net/nshJH/

を使用<div>すると、

float: xxxx;
clear: xxxx;

これは、含まれているコンテンツに動的なクリーンな流動的なページの簡単な例です。また、CSSの1つの場所で、幅やテキストのプロパティをその場で変更できることにも注意してください...

于 2012-11-06T23:21:08.397 に答える