table height 100% (u. innerhalb td volle höhe)

[felix]

hi,
folgendes problem:

durch angabe einer doctype funktioniert das setzen der höhe eines tables nur wenn man auch html u. body auf height:100% stellt. dann kann man auch ein table mit height:100% definieren.
so weit so gut.
nur kennt jemand eine lösung für folgendes problem?

<table style="height:100%">
   <tr>
      <td style="height:100px;">
         dieses td ist 100px hoch.
      </td>
   </tr>
   <tr>
      <td style="height:100%">
         dieses td soll den rest des schirms füllen, aber nicht mehr!
      </td>
   </tr>
</table>

das problem ist folgendes: die übergeordnete table füllt den bilschirm in der höhe komplett. das erste td ist 100px hoch aber das zweite soll dann einfach den rest füllen. jedoch ist das td mit der höhe von 100% so hoch wie der bildschirm, dh. ich bekomme einen scrollbar weil die gesamte table 100px größer ist als der screen. das passiert aus dem grund weil 100% sind 100% des elternelements (also somit der ganze screen).
ohne angabe einer dtd url funktioniert es ja, aber das kann ich leider nicht machen.

gibts dafür eine lösung oder sind layouts mit 100%igen höhenangaben nicht mehr möglich (finde ich sehr schwachsinnig)

danke, lg

[felix]

achja und antworten wie "layouts mit tables sind sowieso scheisse" möchte ich gleich vorwegnehmen, dass es mit:

<div style="height:100%">
   <div style="height:100px;">
         dieses div ist 100px hoch.
   </div>
   <div style="height:100%">
       dieses div soll den rest des schirms füllen, aber nicht mehr!
   </div>
</div>

sich genauso verhält.

[Harlequin]

Yerf!

achja und antworten wie "layouts mit tables sind sowieso scheisse" möchte ich gleich vorwegnehmen, dass es mit:

<div style="height:100%">
   <div style="height:100px;">
         dieses div ist 100px hoch.
   </div>
   <div style="height:100%">
       dieses div soll den rest des schirms füllen, aber nicht mehr!
   </div>
</div>

sich genauso verhält.

Das liegt daran, dass sich die 100% des inneren Div an der Höhe des äußeren und nicht am verbleibenden Platz orientieren (bei der Tabelle genauso). Was passiert, wenn Du bei der Tabellenzelle die 100% einfach weglässt? (die Tabelle sollte ja trotzdem die Höhe erzeugen).

Alternativ könnte man das auch mit absoluter Positionierung erreichen.
#div1{position:absolut;height:100px;top0px;}
#div2{position:absolut;top100px;bottom0px;}

Der IE kann das aber leider nicht. Der ist zu blöd ne Höhe zu berechnen, wenn man ihm das nicht extra per Expression erklärt.

#div2{position:absolut;top100px;}
html > body #div2 {bottom:0px;}
* html #div2{height:expression((window.document.body.clientHeight - 100)+"px");

Funktioniert dann allerdings nur mit JavaScript...

Gruß,

Harlequin

[felix]

Yerf!

achja und antworten wie "layouts mit tables sind sowieso
Was passiert, wenn Du bei der Tabellenzelle die 100% einfach weglässt? (die Tabelle sollte ja trotzdem die Höhe erzeugen).

das verhält sich vollkommen eigenartig (wieder mal nur im IE):

<table style="height:100%; width:100%;" border="1">
 <tr>
  <td style="background-color:#ff0000; height:100px;">
   asdf
  </td>
 </tr>
 <tr>
  <td style="background-color:#00ff00;">
   asdf
  </td>
 </tr>
</table>

erzeugt folgendes:

http://www.felixsigl.com/fileadmin/files/bla.jpg

[Gernot Back]

Hallo felix,

gibts dafür eine lösung oder sind layouts mit 100%igen höhenangaben nicht mehr möglich (finde ich sehr schwachsinnig)

Doch, in vernünftigen Browsern, zu denen leider auch der IE 7 immer noch nicht gehört, ist das auch mit den striktesten DOCTYPES möglich.

Deshalb schrieb ich ja auch vor einigen Tagen zum Thema IE 7:Wir können weiter quirksmurksen

Vergleiche auch diesen aktuellen Thread:
http://forum.de.selfhtml.org/my/?t=139826

Gruß Gernot