Sind HTMLTabellen wirklich ersetzbar? - AJAX (Asynchronous JavaScripting and XML) Forum

Worschtel · 05.02.2010, 23:17

Ich will ein DIV so beschreiben das es in seinem Elterelement (auch ein div) immer nur dir restlich verbleibende Höhe einnimt.
Mit einer klassischen Tabelle funktioniert das einwandfrei.
Aber mit CSS krieg ichs einfach nicht hin ohne an irgend einen Workaround Spagat zu denken.
Beispiel hier erst mal als Link zum anschaun.

Tabelle und div mit 100% Höhe

Unterhalb der Quellcode.

HTML-Code:

<html>
<head>

<style>
html, body{
  height: 100%;
  width: 100%;
  margin:0px;
}

div{
   border: 1px solid #900;
}

table{
  height: 100%;
  width:100%;
}

.content{
  height: 100%;
}

.container{
  float:left;
  height:200px;
  width:300px;
  margin: 20px;
  padding:5px;
  border: 2px solid #00F;
}
</style>

</head>
<body>

<br>
<h3> Blaue Divs als Elternelemente mit 200px Höhe</h3>

<div class="container">

<table border="1">
  <tr>
    <td>Kopfzeile</td>
  </tr>
  <tr>
    <td class="content">So solls sein!</td>
  </tr>
  <tr>
    <td>Fußzeile</td>
  </tr>
</table>

</div>


<div class="container">

   <div>Kopfzeile</div>
   <div class="content">Anders als erwartet! </div>
   <div>Fußzeile</div>

</div>

</body>
</html>

Meine Frage an der Stelle ist, ob es mit DIVS einen ähnlich einfachen oder sinnigen Workaround gibt welcher sich mit dem Darstellungsverhalten der handelüblichen HTML Tabelle gleicht.

Und zwar ohne die Höhe exakt in Pixeln knallhart angeben zu müssen,
und ohne mit margin, padding -x zu arbeiten und auf jeden Fall ohne einen Javascript Interpreter dazu zu bemühen die Höhen dynamisch zu berechnen.

Über einen Beitrag würde ich mich sehr freuen.

mikdoe · 06.02.2010, 08:32

Hallo Worschtel,

ich hab das auch mal gebraucht für eine Sache, wo ich nach Klick auf einen Button diesen durch ein animiertes GIF als Ladeanzeige ersetze. Da brauchte ich auch die genaue Höhe, damit das Layout nicht verrutscht.

Falls das vergleichbar ist mit Deiner Frage, könntest vielleicht mit document.getElementById(EId).offsetHeight die aktuelle Höhe des Elements auslesen und das neue Element mit document.getElementById(KId).height in seiner Höhe festlegen.
Quasi halb dynamisch durch variabel ausgelesene und zugleich feste Höhenangaben.

05.02.2010, 23:17	#1 (permalink)
Worschtel Neuer Benutzer Registriert seit: 04.02.2010 Beiträge: 3	Sind HTMLTabellen wirklich ersetzbar? Ich will ein DIV so beschreiben das es in seinem Elterelement (auch ein div) immer nur dir restlich verbleibende Höhe einnimt. Mit einer klassischen Tabelle funktioniert das einwandfrei. Aber mit CSS krieg ichs einfach nicht hin ohne an irgend einen Workaround Spagat zu denken. Beispiel hier erst mal als Link zum anschaun. Tabelle und div mit 100% Höhe Unterhalb der Quellcode. HTML-Code: <html> <head> <style> html, body{ height: 100%; width: 100%; margin:0px; } div{ border: 1px solid #900; } table{ height: 100%; width:100%; } .content{ height: 100%; } .container{ float:left; height:200px; width:300px; margin: 20px; padding:5px; border: 2px solid #00F; } </style> </head> <body> <br> <h3> Blaue Divs als Elternelemente mit 200px Höhe</h3> <div class="container"> <table border="1"> <tr> <td>Kopfzeile</td> </tr> <tr> <td class="content">So solls sein!</td> </tr> <tr> <td>Fußzeile</td> </tr> </table> </div> <div class="container"> <div>Kopfzeile</div> <div class="content">Anders als erwartet! </div> <div>Fußzeile</div> </div> </body> </html> Meine Frage an der Stelle ist, ob es mit DIVS einen ähnlich einfachen oder sinnigen Workaround gibt welcher sich mit dem Darstellungsverhalten der handelüblichen HTML Tabelle gleicht. Und zwar ohne die Höhe exakt in Pixeln knallhart angeben zu müssen, und ohne mit margin, padding -x zu arbeiten und auf jeden Fall ohne einen Javascript Interpreter dazu zu bemühen die Höhen dynamisch zu berechnen. Über einen Beitrag würde ich mich sehr freuen.

06.02.2010, 08:32	#2 (permalink)
mikdoe Erfahrener Benutzer Registriert seit: 18.01.2009 Beiträge: 783	Hallo Worschtel, ich hab das auch mal gebraucht für eine Sache, wo ich nach Klick auf einen Button diesen durch ein animiertes GIF als Ladeanzeige ersetze. Da brauchte ich auch die genaue Höhe, damit das Layout nicht verrutscht. Falls das vergleichbar ist mit Deiner Frage, könntest vielleicht mit document.getElementById(EId).offsetHeight die aktuelle Höhe des Elements auslesen und das neue Element mit document.getElementById(KId).height in seiner Höhe festlegen. Quasi halb dynamisch durch variabel ausgelesene und zugleich feste Höhenangaben. __________________ ich liebe JS und Ajax wenn es crossbrowsertauglich ist

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
location.href mit anker im IE funktioniert nicht wirklich	turnschuh	JavaScript	0	28.06.2008 14:13
[JAVA] Wo sind die Könner?! ^^	Matty	Sonstige Probleme	5	07.05.2008 21:10
Bild im Firefox da im IE nicht wirklich	Matty	Auszeichnungssprachen	1	24.05.2007 09:28
Welche Grafiken sind überflüssig?	DaRolla	Sonstige Probleme	1	16.03.2007 16:07
Umlaute sind Fragezeichen	Zappelphilipp	Sonstige Probleme	13	25.05.2006 16:37

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen