基本的な問題はこのフォーラムで何度も提起されてきましたが、満足のいく回答は得られませんでした.IMO. テーブル セル内で div を引き伸ばしてセルを埋める方法 (垂直方向、水平方向、またはその両方) は?
別の要素内でdivを100％の高さと幅にスケーリングするにはどうすればよいですか
ディスプレイ内の 100% 高さ div:table-cell div
などなど
はい、完全にエレガントな CSS でテーブルを作成する必要がある場合、テーブル セル内に div を埋め込むという観点から考えると、私はさらに別の化石と見なされることは承知しています。 ! （2008）。しかし、彼らや他の人が書いたものを試した後、私はあまり感心しませんでした. 彼らの「成功」の秘訣は、 display:tableに頼ることにありました。CSS の「テーブル」を作成するための一連の属性、最終的にはどうなるでしょうか? 表、表の行、または表のセルのように機能する div (ボックス)。角を丸くすることはできません (表のセル内に div を埋め込む必要がある理由の 1 つです)。それを別のボックスまたはテーブルに埋め込むと、この問題に関する限り、振り出しに戻ることになります。テーブルは適切な div を作成しません。逆もまた同様です。
上記のリンクされた投稿のいずれかで言及されているように、基本的な問題は、表のセルが含まれている div にピクセル単位の高さを提供しないため、「高さ:100%」または「最小高さ:100%」他の回避策がないスタイルシートは無視されます。セルはセルであり、div は div であり、Javascript に精通していない限り、この 2 つが一致することはありませんが、私はそうではありません。特定の div の垂直方向の高さを囲んでいるテーブル セルの垂直方向の高さと一致させるスクリプトを使用しない堅牢なマークアップが欲しかっただけです。これにより、隣接するセルがより高い場合、行全体が伸びて 100% を維持するように div が伸びます。
私はposition:absolute;を使いたくありませんでした。上: 0; bottom:行の高さは最も高いセルの高さに依存するため、ピクセル単位で定義されたセルの高さを持つ 0。
さて、実際に聖杯を達成したと思ったのは、次のとおりです。これは、3 つの div (実際には HTML5 の nav) を含む 1 行のテーブルです。真ん中 (つまり、2 番目) を行の高さいっぱいまで伸ばしたいと思います。(追加 - テキストが列 1 または 3 に追加または削除されると、行全体の垂直方向の高さが拡張または縮小されるため、列 2 は常にそれを囲むセルの完全な垂直方向の高さのままになります。つまり、隣接する列にさらにテキストが含まれている場合、テキストの下に余分な空白 (ピンク色のスペース、コードを参照!) が表示されます. また、列 2 に列 1 または 3 よりも多くのテキストが含まれているかどうかは問題ではありません. 私が懸念している限り、それらは縮小する可能性があります. .)
<!DOCTYPE html>
<html>
<html lang="en">
<meta charset="utf-8">
<title></title>
<link href="style4.css" rel="stylesheet">
</head>
<body>
<table id="tbl_main" border="1" style="width:60%; table-layout:fixed">
<!-- Creates columns of equal width -->
<tr class="v_align_top">
<td><nav id="col1" class="normal">COL 1 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. </nav>
</td>
<td height="100%">
<table id="tbl_inner">
<tr>
<td style="height:100%">
<nav id="col2" class="vstretch">COL 2 Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
</nav>
</td>
</tr>
</table>
</td>
<td><nav id="col3" class="normal">COL 3 Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</nav></td>
</tr>
</table>
</body>
</html>
CSSは次のとおりです。
#tbl_main {
border: 1px solid black;
border-collapse:collapse;
}
#tbl_inner {
border: 1px solid black;
border-collapse:collapse;
height:100%; /* min-height doesn't work here */
}
tr.v_align_top{
vertical-align: top;
}
.normal {
border-radius: 20px 20px 20px 20px;
border: 3px solid rgb(0, 0, 0);
padding: 10px;
}
.vstretch {
border-radius: 20px 20px 20px 20px;
border: 3px solid rgb(0, 0, 0);
padding: 10px;
}
#col1 {
background-color: rgb(220, 220, 220);
margin:5px;
}
#col2 { /* stretch to 100% height of table cell */
background-color: rgb(255, 220, 220);
margin:5px 5px 5px 5px;
height:100%;
}
#col3 {
background-color: rgb(220, 220, 220);
margin:5px;
}
(追加) ここで遊ぶことができます: jsFiddle リンク
外観は次のとおりです (Windows 7 上の Firefox 10)。
残念ながら、私はまだ写真を直接投稿する権利を得るのに十分な数の投稿をしていないので、このリンクで間に合わせる必要があります.
表の枠線をわざと見えるようにしました。おっとっと。中央の div は、Col 1 からテキストを追加または削除しても、同じピクセル数だけ外側のテーブルの下に拡張されているようです。奇妙です。#col2の高さをたとえば 95% に減らすことは、変動する概算にすぎないため、解決策ではありません。
とても近くて、まだ遠い。これを解決せずに、 bottom-margin: -10pxからborder-spacing: 20pxまで、考えられるすべてを試しました。誰かが答えを提案できますか、それともそれを完全に解決するための簡単なJavascriptを考え出すことができますか? よろしくお願いします。