nicht angemeldet
<div> soll 100% der Höhe einer <td> ausfüllen
0 
Matthias Apsel
0 0 Matthias Apsel
0 0 Matthias Apsel
0
<div> soll 100% der Höhe einer <td> ausfüllen
Hi,
ich möchte innerhalb einer Tabelle verschieden lange Texte darstellen. Am unteren Rand einer <td> soll noch eine Art footer stehen. Also in etwas so:
+----+----+----+
|test+test+test+
| +foo + +
| +bar + +
| + + +
|foot+foot+foot+
+----+----+----+
Bei folgendem Code werden die <div class="foo"> nur jeweils so groß, dass der Inhalt reinpasst. Wie kann ich erreichen, dass die die <td> voll in der Höhe ausfüllen?
<style type="text/css">
<!--
.foo{
border: 1px solid red;
height:100%;
}
.unten{
vertical-align:bottom;
}
-->
</style>
<table border="1">
<tr>
<td>
<div class="foo">
ein Text
<div class="unter">footer</div>
</div>
<td>
<td>
<div class="foo">
ein Text<br>zweite Zeile
<div class="unter">footer</div>
</div>
<td>
<td>
<div class="foo">
ein Text
<div class="unter">footer</div>
</div>
<td>
</tr>
</table>
Gruß
Ralf
-
Om nah hoo pez nyeetz, Ralf!
ich möchte innerhalb einer Tabelle verschieden lange Texte darstellen. Am unteren Rand einer <td> soll noch eine Art footer stehen. Also in etwas so:
Das sieht mir nicht nach tabellarischen Daten aus. Du solltest deshalb keine Tabelle verwenden. Erstelle semantisches HTML.
Matthias
--
1/z ist kein Blatt Papier.
-
Das sieht mir nicht nach tabellarischen Daten aus.
Doch, doch. Jedes tabellarische Datum besteht aber aus einem Hauptteil und einer Art Fußnote.
Gruß
Ralf-
-
Da Eleternelement ist in meinem Fall <td>. Diese kann bzw. will ich in der Höhe nicht definieren da sich dessen Höhe ja dem Inhalt anpassen soll. Das Angenehme an der <table> ist ja gerade, dass sich alle <td> einer <tr> an die Höhe des hochsten Inhaltes anpassen.
Sehe ich das richtig, dass es für den vorgestellten Fall keine Lösung (wenn man an <table> festhalten will/muss) gibt?
Gruß
Ralf
-
Om nah hoo pez nyeetz, Ralf!
Sehe ich das richtig, dass es für den vorgestellten Fall keine Lösung (wenn man an <table> festhalten will/muss) gibt?
Möglicherweise lässt sich mit absoluter Positionierung etwas erreichen. Das wirft allerdings neue Probleme auf. Was, wenn der Text nicht in das Tabellenfeld passt?
PS: Semantik ist nicht nur der Verzicht auf Tabellenlayout, sondern vor allem die Verwendung passender Elemente. Deine div class="foo" sind möglicherweise p-Elemente und die anderen vielleicht footer. Dann lässt sich auch auf die Klassen verzichten.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
also mal davon abgesehen, dass ich allergrößte "Zweifel" daran habe, dass dein "Konstrukt" semantisch korrekt ist, hast du dir die Antwort doch schon selber gegeben ...! ;-)
Da Eleternelement ist in meinem Fall <td>. Diese kann bzw. will ich in der Höhe nicht definieren da sich dessen Höhe ja dem Inhalt anpassen soll. Das Angenehme an der <table> ist ja gerade, dass sich alle <td> einer <tr> an die Höhe des hochsten Inhaltes anpassen.
Daraus folgt entweder eine "verschachtelte" Tabelle oder du nutzt die display Eigenschaften "table[-xyz]".
Ein weiterer "Lösungsansatz" könnte auch "Flex Box" sein.
Um deinen Fall aber wirklich beurteilen zu können, fehlen die nötigen Infos (z.B. welche Browser(versionen) unterstützt werden sollen, reine CSS Lösung und/ oder JS etc.).
Gruß Gunther
-
-
-
-