9

3 つの<table>行と列があり、最後のテーブル行は次のようになります。

<tr>
 <td colspan="3" align="center" valign="top" style="background-color: #eeeeee;">
  <hr class="vdivider">
  <div class="sitemap">There's an unordered list in here</div>
 </td>
</tr>

私が理解できない奇妙なことは<tr>、その内容のほぼ2倍の高さです. 両方<hr>を<div>合わせて、テーブルの行の上部にうまく配置され、テーブルの下部に約 150 ピクセルの空きスペースがあります。すべての要素のパディングとマージンとボーダーは 0 であり、テーブルまたはその行/列には、これ以外のスタイルはあまりありません。

html, body, table {
  width: 100%;
  height: 100%;
}

そのテーブルの行をコンテンツの高さに合わせて、下部の大きなスペースを取り除くにはどうすればよいですか? ここでテーブルに高さを割り当てて、ウィンドウがテーブルよりも大きい場合にウィンドウの下部まで伸びるようにしました。私はそれが過度に大きな<tr>起源だと思います。その伸びを補うために<tr>、サイトマップの上にエクストラを追加しようとしましたmin-height:100px; max-height:none;が、それは役に立ちませんでした.

EDITタイプミスを修正しました。

編集これについてもう少し背景があります。

+--------------------------------+ ブラウザ ウィンドウ (html 本文)
| | +--------------------------------+ |
| | | | バナー画像 | | | ここには、ページ全体に広がるバナー画像があります
| | +--------------------------------+ |
| | | | cssメニューバー | | | ul から構築された標準の CSS メニュー
| | +--------------------------------+ | ここから表が始まり、3 つの列があります
| | | | td | td | td | | |
| | | | | | | | | | | |
| | +--------------------------------+ |
| | | | tr colspan=3 スペースを作る | | | 上のコンテンツと下のサイトマップの間にスペースを空けるための列があります
| | +--------------------------------+ |
| | | | サイトマップの tr colspan=3 | | | tr 上から、下に伸びるサイトマップ if table { height: 100%; }
| | +--------------------------------+ |
| | | | これは、テーブルに高さの設定がない場合の大きな窓のスペースです。
+--------------------------------+
4

4 に答える 4

11

フィードバックありがとうございます！テーブルをページの下部まで引き伸ばさないため、を削除してtable { height: 100%; }も機能しませんでした。このストレッチは私が望んでいたものですが、これが<tr>この質問が言及している過度に膨らんだ原因でもあると思います.

これに対する解決策は、より偶然でした。

<tr style="height: 0;">
  ...
</tr>

これにより、行はそのコンテンツのサイズに縮小されますが、表はページの下部まで引き伸ばされます。これが「健全な」解決策であるかどうかはわかりませんが、確実に機能します。

于 2013-06-29T22:33:21.083 に答える
2

高さを削除

html, body, table {
  width: 100%;
}

これは次のようになります ( のオーバーヘッドはもうありません<tr> height)

ここに画像の説明を入力

htmlとにかく、なぜ100％の高さなのbodyですか？また、私はに変更There's a <ul> hereしますThere's a &lt;ul> here

于 2013-06-27T11:48:18.090 に答える
0

TRタグを修正して適切に閉じると、余白が引き伸ばされているため、高さが非常に大きいことがわかります。ULこのタグの CSS を変更すると小さくなります。こちらを確認してください。

ul {
    margin: 0;
    padding: 0;
}

テーブルに1行しかないような反対側の場合、スタイルheight: 100%をテーブルに追加すると、その行は最大まで伸びます。スタイルを変更して、このように残すことができますチェックしてください

table {
    width: 100%;
}
于 2013-06-27T11:45:35.143 に答える