0

テーブルを使わずに次のような効果を得るにはどうすればよいですか？

例： http ：//enstar.nl/example.php （この例は現時点では表示されていない可能性があります。ネームサーバーは変更されているはずですが、ホスティングの更新はそれほど速くありません。今日は後で動作するはずです。Iご不便をおかけして申し訳ございません）

すべてのメソッドには、ヘッダーまたはフッター、あるいはその両方が必要です。私はそれを望んでいません。

私が欲しいのは次のとおりです。

純粋なCSS、テーブルなし2列、コンテンツがビューポートの下部に到達していない場合は、列をビューポートに拡張するよりも、流動性を（この順序で）固定します。それ以外の場合はコンテンツの範囲（粘着性のあるフッターのように）

100％x100％のテーブルは、これを自然に行います。しかし、私は本当にこれにテーブルを使いたくありません。

何か案は？

編集：

現在のHTML

<table width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td id="navigation" valign="top" align="left">
        </td>
        <td id="content" valign="top" align="left">
        </td>
    </tr>
</table>
4

1 に答える 1

1

2列を設定するには、テーブルを使用したくない場合にいくつかのオプションがあります

<div id="wrapper" style="height: 100%;">
    <div style="background-color: green;">
        <div id="leftCol" style="float: left; width: 200px;">testing</div>
        <div style="background-color: red; margin-left: 200px;">
            <div id="rightCol" style="height: 900px;" >testing testing testing testing testing testing testing</div>
        </div>
    <div class="clear"></div>
    </div>
</div>

rightCol 内のテキストが左列のテキストよりも長い限り (要素の最小高さで処理できます)、スケーリングに問題はありません。

これにより、Javascript で 2 番目の幅を設定する必要もなくなります。その理由は、親 div の幅に設定されているためです。デフォルトでは、赤い列を 200 ピクセル左にマージンを設定しているため、表示セクションがスライドして左の列が表示されるためです。

于 2011-10-24T13:38:43.667 に答える