Zum Inhalt springen

Tabelle mit 100% Height

kills

Von kills
in Webdesign

 Teilen

Empfohlene Beiträge

kills

kills

Geschrieben
Geschrieben

Hallo zusammen,

folgender Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

<html>

  <head>

    <title>FileSystemBrowser</title>


.

.

.

  </head>

<body>


<table style="width: 100%; height: 100%;" cellspacing="0" cellpadding="0">

  <tr style="height: 45px">

    <td>Kopfzeile</td>

  </tr>

  <tr>

    <td>Content</td>

  </tr>

  <tr style="height: 25px">

    <td>Fußzeile</td>

  </tr>

</table>


</body>

</html>

wie bekomme ich es hin, das die KopfZeile 45px groß ist, die Fußzeile 25px und der content den rest von der seite einnimmt.

Ich hab es versucht aber bin auf keinen grünen zweig gekommen

etreu

etreu

Geschrieben
Geschrieben

Probier mal:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

<html>

  <head>

    <title>FileSystemBrowser</title>

  </head>

<body>


<table style="width: 100%; height: 100%;" cellspacing="0" cellpadding="0">

  <tr>

    <td style="height: 45px">Kopfzeile</td>

  </tr>

  <tr>

    <td style="height:100%">Content</td>

  </tr>

  <tr>

    <td  style="height: 25px">Fußzeile</td>

  </tr>

</table>


</body>

</html>

Was mir sonst noch einfällt:

- im body height auf 100% setzen

- eine absolute positionierte ebene mit top=0, left=0, width und height = 100% und dann darin die tabelle

kills

kills

Geschrieben
  • Autor
Geschrieben
Probier mal:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

<html>

  <head>

    <title>FileSystemBrowser</title>

  </head>

<body>


<table style="width: 100%; height: 100%;" cellspacing="0" cellpadding="0">

  <tr>

    <td style="height: 45px">Kopfzeile</td>

  </tr>

  <tr>

    <td style="height:100%">Content</td>

  </tr>

  <tr>

    <td  style="height: 25px">Fußzeile</td>

  </tr>

</table>


</body>

</html>

hab ich veruscht, aber dann macht er den Content genauso hoch die Komplette Tabelle sein soll.

Probier mal:

Was mir sonst noch einfällt:

- im body height auf 100% setzen

- eine absolute positionierte ebene mit top=0, left=0, width und height = 100% und dann darin die tabelle

zu 1) Habe ich veruscht geht nicht!

zu 2) Das müsste doch genau das gleiche ergeben, ist doch egal, ob das element "über" der tabelle ein div mit 100% ist oder eine body mit 100%

Spike

Spike

Geschrieben
Geschrieben

Hi,

so gehts:


<html>

<head>

<title>Test</title>

<style type="text/css">


.tabelle { height:100%; width:100%; }


</style>

</head>

<body>


<table width="100%" height="100%" border="1">

  <tr>

    <td height="45">Kopfzeile</td>

  </tr>

  <tr>

    <td>


    <table class="tabelle" border="1">

      <tr>

        <td>Content</td>

      </tr>

    </table>


    </td>

  </tr>

<tr>

<td height="25">Fußzeile</td>

</tr>

</table>

</body>

Anders gehts nicht, du kannst einer Zelle leider keine 100% Höhe geben. Jedenfalls nicht wenn es in allen Browsern funktionieren soll.

kills

kills

Geschrieben
  • Autor
Geschrieben

danke bestens!

hab noch ne kleinigkeit umgebaut!


<html>

<head>

<title>Test</title>

<style type="text/css">


.tabelle { height:100%; width:100%; }


</style>

</head>

<body>


<table class="tabelle" border="1">

  <tr>

    <td height="45">Kopfzeile</td>

  </tr>

  <tr>

    <td>


    <table class="tabelle" border="1">

      <tr>

        <td>Content</td>

      </tr>

    </table>


    </td>

  </tr>

<tr>

<td height="25">Fußzeile</td>

</tr>

</table>

</body>

</html>

kills

kills

Geschrieben
  • Autor
Geschrieben

nachtrag:

das geht aber nur, solange man nicht den Doctype setzt! :(


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

Schledo

Schledo

Geschrieben
Geschrieben

Wenn du per Doctype HTML festlegst wird eine Tabelle mit dem Attribut height zu Problemen führen, daher muss man style="height:XXX" verwenden.

Das rührt daher, das eine Tabelle im HTML-Standard kein height-Attribut kennt. Das hat es in HTML nie gegeben und gibts auch jetzt noch icht, da Tabellen nie zum layouten gedacht waren.

Die Browser setzen es allerdings um, aber wenn man konform/validiert arbeiten möchte, muss man es eben per CSS lösen, sowie oben eben oder in extra CSS-Klassendatei.

Habe es eben geprüft und sobald man den Doctype reinmacht interpretiert der Browser bei mir es auch nicht mehr das Attribut (IE6 in aktueller Version) :-)

kills

kills

Geschrieben
  • Autor
Geschrieben
Wenn du per Doctype HTML festlegst wird eine Tabelle mit dem Attribut height zu Problemen führen, daher muss man style="height:XXX" verwenden.

Das rührt daher, das eine Tabelle im HTML-Standard kein height-Attribut kennt. Das hat es in HTML nie gegeben und gibts auch jetzt noch icht, da Tabellen nie zum layouten gedacht waren.

Die Browser setzen es allerdings um, aber wenn man konform/validiert arbeiten möchte, muss man es eben per CSS lösen, sowie oben eben oder in extra CSS-Klassendatei.

Oben im Beispiel, haben wir es doch per style="height:XXXpx;" versucht, aber das ergebnis ist bei eingesetztem Doctype das es nicht funktioniert....

Habe ich dich missverstanden?

poste mal bitte ein Beispiel wie du es meinst!

Danke.

Schledo

Schledo

Geschrieben
Geschrieben

Bei einem DocType von z.B.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

sollte das hier funktionieren (tut es bei mir):

<table style="height:100%">

kills

kills

Geschrieben
  • Autor
Geschrieben

bestens danke! :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Test</title>

<style type="text/css">


.tabelle { height:100%; width:100%; }


</style>

</head>

<body>


<table class="tabelle" border="1">

  <tr>

    <td height="45">Kopfzeile</td>

  </tr>

  <tr>

    <td>


    <table class="tabelle" border="1">

      <tr>

        <td>Content</td>

      </tr>

    </table>


    </td>

  </tr>

<tr>

<td height="25">Fußzeile</td>

</tr>

</table>

</body>

</html>

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...