DIV-Container mit height="100%"

[Gunther]

Hallo zusammen!

Folgendes Problem:
Ich habe eine variable Tabelle mit u.a. einer Reihe (<tr>) deren Zellen (3 Stück) jeweils eine Höhe von 100% haben (<td height="100%">). Nun kann es aber sein, dass der Inhalt der mittleren Zelle einen größeren (höheren) Inhalt hat, als die beiden äusseren Zellen, deren Inhalt aber für die Höhe maßgeblich sein soll.

Also wollte ich den Inhalt der mittleren Zelle in einen DIV-Container packen:
<td height="100%">
<div style="height: 100%; width: 100%; overflow: auto;">
Inhalt
</div>
</td>

Im MSIE funktioniert das auch ganz hervorragend, allerdings zeigt der NS 6/7 den Container nicht an, da er sich offenbar an der Höhen-Angabe von 100% (für den Container) stört.

Hat jemand eine Idee, wie man das Problem lösen kann?

Vielen Dank & Gruß
         Gunther

[Thomas J.S.]

Hallo,

Also wollte ich den Inhalt der mittleren Zelle in einen DIV-Container packen:
<td height="100%">
<div style="height: 100%; width: 100%; overflow: auto;">
Inhalt
</div>
</td>

Im MSIE funktioniert das auch ganz hervorragend, allerdings zeigt der NS 6/7 den Container nicht an, da er sich offenbar an der Höhen-Angabe von 100% (für den Container) stört.

Ich würde nur der ersten <td> einer Zeile height zuweisen und im mittleren dann nur dem <div>.
Außerdem, so richtig verstehe ich nicht, warum du in jeder Zeile ein <td height="100%"> brauchst, da 100% hier jedes mal sich auf die Höhe des umgebenden Blocks bezieht, wodurch sich diese Angaben überschneiden.

Grüße
Thomas

[Gunther]

Hallo Thomas,

Ich würde nur der ersten <td> einer Zeile height zuweisen und im mittleren dann nur dem <div>.
Außerdem, so richtig verstehe ich nicht, warum du in jeder Zeile ein <td height="100%"> brauchst, da 100% hier jedes mal sich auf die Höhe des umgebenden Blocks bezieht, wodurch sich diese Angaben überschneiden.

Nein, brauche ich natürlich nicht ;-)
hat aber nichts mit dem eigentlichen Problem zu tun.

im Gegensatz zum MSIE scheint der NS (6/7) nicht in der Lage zu sein, die Höhe der Tabellenzelle (<td>) an den DIV-Container zu 'vererben', so dass die Höhenangabe von 100% den Wert 0 hat.

Ich suche nach wie vor eine Möglichkeit, dieses Problem browserübergreifend zu lösen ...!

Gruß Gunther

[Thomas J.S.]

Hallo Gunther,

im Gegensatz zum MSIE scheint der NS (6/7) nicht in der Lage zu sein, die Höhe der Tabellenzelle (<td>) an den DIV-Container zu 'vererben', so dass die Höhenangabe von 100% den Wert 0 hat.

Ich suche nach wie vor eine Möglichkeit, dieses Problem browserübergreifend zu lösen ...!

ich habe es jetzt mit dem IE6 und mozilla 1.2.1 getestet:
beide machen das selbe. Die zweite Zelle mit dem div hat einen Scrollbalken und die Zellen sind so hoch, dass sich der Inhalt der ersten (oder dritten) Zelle ausgeht.

Hm.... der "Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.0.1) Gecko/20020823 Netscape/7.0" macht n der Tat müll daraus:

die Lösung ist: du muss auch deiner Tabelle eine Höhe geben, egal ob % oder px.

<table style="height:95%">

<tr>
<td height="100%"></td>
<td height="100%">
<div style="height:100%; width:100%; overflow:auto;">

...

Grüße
Thomas

[Gunther]

Hallo Gunther,

im Gegensatz zum MSIE scheint der NS (6/7) nicht in der Lage zu sein, die Höhe der Tabellenzelle (<td>) an den DIV-Container zu 'vererben', so dass die Höhenangabe von 100% den Wert 0 hat.

Ich suche nach wie vor eine Möglichkeit, dieses Problem browserübergreifend zu lösen ...!

ich habe es jetzt mit dem IE6 und mozilla 1.2.1 getestet:
beide machen das selbe. Die zweite Zelle mit dem div hat einen Scrollbalken und die Zellen sind so hoch, dass sich der Inhalt der ersten (oder dritten) Zelle ausgeht.

Hm.... der "Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.0.1) Gecko/20020823 Netscape/7.0" macht n der Tat müll daraus:

die Lösung ist: du muss auch deiner Tabelle eine Höhe geben, egal ob % oder px.

<table style="height:95%">

<tr>
<td height="100%"></td>
<td height="100%">
<div style="height:100%; width:100%; overflow:auto;">

...

Grüße

Hallo Thomas,

ich widerspreche ja nur ungern, aber die Lösung scheint mir das noch nicht zu sein. Wenn man der Tabelle eine Höhe (was dann nicht mehr HTML-konform ist) zuweist, wird der DIV-Container im NS immer noch nur dann angezeigt, wenn der tatsächliche Tabellen-Inhalt höher als eine Bildschirmseite ist, ansonsten wird er nach wie vor nicht angezeigt.

Trotzdem vielen Dank an dich, dass du dich mit dem Problem beschäftigt hast, und solltest du noch eine (bessere) Lösung finden, lass' es mich bitte wissen!

Gruß Gunther

[Thomas J.S.]

Hallo Gunther,

Wenn man der Tabelle eine Höhe (was dann nicht mehr HTML-konform ist) zuweist,

Mit style="height:...;" ist es HTML-konform.

» wird der DIV-Container im NS immer noch nur dann angezeigt, wenn der tatsächliche Tabellen-Inhalt höher als eine Bildschirmseite ist, ansonsten wird er nach wie vor nicht angezeigt.

Das kann ich nicht nachvollziehen (siehe Code)

Grüße
Thomas
--------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Untitled</title>
</head>

<body>
<table style="height:95%">

<tr>
<td height="100%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Nulla sit amet urna in est gravida interdum. Aenean suscipit. Vestibulum
non augue. Vivamus luctus enim ac nunc adipiscing dictum. Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna. Nunc
congue, neque eu pharetra commodo, turpis dolor molestie erat, a adipiscing ipsum lacus a nisl. Quisque eget elit. Morbi odio. Duis sit amet pede.
Vivamus sed enim in erat vehicula fringilla. Duis viverra. Nam condimentum, mi vel mollis vulputate, libero orci sodales urna, a tempor odio lectus
eget wisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum tortor nec turpis.
Aenean suscipit adipiscing sem. Vivamus id felis. Praesent ornare malesuada tortor.</td>
<td height="100%">
<div style="height:100%; width:100%; overflow:auto;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Nulla sit amet urna in est gravida interdum. Aenean suscipit. Vestibulum
non augue. Vivamus luctus enim ac nunc adipiscing dictum. Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna. Nunc
congue, neque eu pharetra commodo, turpis dolor molestie erat, a adipiscing ipsum lacus a nisl. Quisque eget elit. Morbi odio. Duis sit amet pede.
Vivamus sed enim in erat vehicula fringilla. Duis viverra. Nam condimentum, mi vel mollis vulputate, libero orci sodales urna, a tempor odio lectus
eget wisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum tortor nec turpis.
Aenean suscipit adipiscing sem. Vivamus id felis. Praesent ornare malesuada tortor.

Cras ultricies. Vivamus elementum, sapien quis rhoncus feugiat, nibh est posuere purus, a fringilla ante nibh at turpis. Fusce ante tortor, consequat
eu, sollicitudin quis, bibendum at, sem. Cras venenatis mollis risus. Quisque condimentum gravida arcu. Donec rutrum mauris in sapien.
Pellentesque aliquam suscipit felis. Cras velit. Cras malesuada ligula et tellus. Ut lacus. Donec feugiat. Vivamus justo. Curabitur feugiat. Nullam
lorem odio, venenatis non, ultrices a, facilisis sit amet, metus. Maecenas elit.

Nunc lorem velit, cursus vel, vulputate at, congue ut, urna. Praesent ultrices, sapien a tempus tempor, pede quam varius lacus, eu gravida quam leo
ac nisl. Suspendisse tincidunt purus ac felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur
dignissim tortor tristique metus. Ut a lacus vitae turpis auctor dictum. Vestibulum posuere lacus vel nibh. Fusce id turpis. Nullam enim. Aliquam
ante. Fusce hendrerit dui nec nulla. Pellentesque malesuada, orci non commodo cursus, erat nisl aliquet purus, eu varius pede nulla sed purus.

Morbi molestie. Nulla ante felis, fermentum ultricies, semper id, vehicula et, lorem. Fusce sollicitudin rhoncus libero. Integer dapibus. Etiam lobortis
sodales dui. Suspendisse dictum, odio et imperdiet luctus, pede libero pellentesque odio, in congue ipsum arcu at wisi. Donec convallis
pellentesque est. Nullam vel pede vel odio congue molestie. Donec vehicula. Sed interdum. Suspendisse ipsum arcu, tristique at, ultrices vel,
malesuada eget, elit. Nulla nibh nulla, sodales nec, venenatis vel, feugiat nec, dolor. Maecenas dignissim hendrerit neque. Integer vitae erat.

Nam ut lacus ut neque elementum iaculis. Proin ac eros. Pellentesque rhoncus, orci eu hendrerit tristique, erat velit tempus enim, eget scelerisque
mauris neque in risus. Nunc viverra est. Praesent laoreet. Sed ac turpis. Etiam velit lorem, vestibulum sit amet, tempus at, porta in, felis. Duis in
felis. Morbi feugiat auctor turpis. Aenean at ante a urna congue hendrerit. Phasellus nulla. Ut sollicitudin. Proin urna pede, sollicitudin vel, congue
et, fringilla nec, metus. Praesent sed velit.

</div>
</td>
<td height="100%">Lorem ipsum dolor sit amet, esent ornare malesuada tortor.</td>
</tr>

<tr>
<td height="100%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Nulla sit amet urna in est gravida interdum. Aenean suscipit. Vestibulum
non augue. Vivamus luctus enim ac nunc adipiscing dictum. Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna. Nunc
congue, neque eu pharetra commodo, turpis dolor molestie erat, a adipiscing ipsum lacus a nisl. Quisque eget elit. Morbi odio. Duis sit amet pede.
Vivamus sed enim in erat vehicula fringilla. Duis viverra. Nam condimentum, mi vel mollis vulputate, libero orci sodales urna, a tempor odio lectus
eget wisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum tortor nec turpis.
Aenean suscipit adipiscing sem. Vivamus id felis. Praesent ornare malesuada tortor.</td>
<td height="100%"><div style="height:100%; width:100%; overflow:auto; position:relative;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Nulla sit amet urna in est gravida interdum. Aenean suscipit. Vestibulum
non augue. Vivamus luctus enim ac nunc adipiscing dictum. Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna. Nunc
congue, neque eu pharetra commodo, turpis dolor molestie erat, a adipiscing ipsum lacus a nisl. Quisque eget elit. Morbi odio. Duis sit amet pede.
Vivamus sed enim in erat vehicula fringilla. Duis viverra. Nam condimentum, mi vel mollis vulputate, libero orci sodales urna, a tempor odio lectus
eget wisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum tortor nec turpis.
Aenean suscipit adipiscing sem. Vivamus id felis. Praesent ornare malesuada tortor.

Cras ultricies. Vivamus elementum, sapien quis rhoncus feugiat, nibh est posuere purus, a fringilla ante nibh at turpis. Fusce ante tortor, consequat
eu, sollicitudin quis, bibendum at, sem. Cras venenatis mollis risus. Quisque condimentum gravida arcu. Donec rutrum mauris in sapien.
Pellentesque aliquam suscipit felis. Cras velit. Cras malesuada ligula et tellus. Ut lacus. Donec feugiat. Vivamus justo. Curabitur feugiat. Nullam
lorem odio, venenatis non, ultrices a, facilisis sit amet, metus. Maecenas elit.

Nunc lorem velit, cursus vel, vulputate at, congue ut, urna. Praesent ultrices, sapien a tempus tempor, pede quam varius lacus, eu gravida quam leo
ac nisl. Suspendisse tincidunt purus ac felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur
dignissim tortor tristique metus. Ut a lacus vitae turpis auctor dictum. Vestibulum posuere lacus vel nibh. Fusce id turpis. Nullam enim. Aliquam
ante. Fusce hendrerit dui nec nulla. Pellentesque malesuada, orci non commodo cursus, erat nisl aliquet purus, eu varius pede nulla sed purus.

Morbi molestie. Nulla ante felis, fermentum ultricies, semper id, vehicula et, lorem. Fusce sollicitudin rhoncus libero. Integer dapibus. Etiam lobortis
sodales dui. Suspendisse dictum, odio et imperdiet luctus, pede libero pellentesque odio, in congue ipsum arcu at wisi. Donec convallis
pellentesque est. Nullam vel pede vel odio congue molestie. Donec vehicula. Sed interdum. Suspendisse ipsum arcu, tristique at, ultrices vel,
malesuada eget, elit. Nulla nibh nulla, sodales nec, venenatis vel, feugiat nec, dolor. Maecenas dignissim hendrerit neque. Integer vitae erat.

Nam ut lacus ut neque elementum iaculis. Proin ac eros. Pellentesque rhoncus, orci eu hendrerit tristique, erat velit tempus enim, eget scelerisque
mauris neque in risus. Nunc viverra est. Praesent laoreet. Sed ac turpis. Etiam velit lorem, vestibulum sit amet, tempus at, porta in, felis. Duis in
felis. Morbi feugiat auctor turpis. Aenean at ante a urna congue hendrerit. Phasellus nulla. Ut sollicitudin. Proin urna pede, sollicitudin vel, congue
et, fringilla nec, metus. Praesent sed velit.

</div></td>
<td height="100%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt. Nulla sit amet urna in est gravida interdum. Aenean suscipit. Vestibulum
non augue. Vivamus luctus enim ac nunc adipiscing dictum. Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna. Nunc
congue, neque eu pharetra commodo, turpis dolor molestie erat, a adipiscing ipsum lacus a nisl. Quisque eget elit. Morbi odio. Duis sit amet pede.
Vivamus sed enim in erat vehicula fringilla. Duis viverra. Nam condimentum, mi vel mollis vulputate, libero orci sodales urna, a tempor odio lectus
eget wisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum tortor nec turpis.
Aenean suscipit adipiscing sem. Vivamus id felis. Praesent ornare malesuada tortor.</td>
</tr>

</table>

</body>
</html>

[Gunther]

Hallo Thomas,

du hast Recht - jetzt zeigt er ihn bei mir auch an!? K.A. warum es beim ersten Mal nicht geklappt hat.

Mit der Lösung kann man ja leben. Vielen Dank nochmal für deine Bemühungen (& und deine Geduld).

Gruß Gunther

Wenn man der Tabelle eine Höhe (was dann nicht mehr HTML-konform ist) zuweist,

Mit style="height:...;" ist es HTML-konform.

» wird der DIV-Container im NS immer noch nur dann angezeigt, wenn der tatsächliche Tabellen-Inhalt höher als eine Bildschirmseite ist, ansonsten wird er nach wie vor nicht angezeigt.

Das kann ich nicht nachvollziehen (siehe Code)

Grüße
Thomas