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

Link zu diesem Kommentar
Auf anderen Seiten teilen
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

Link zu diesem Kommentar
Auf anderen Seiten teilen
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%

Link zu diesem Kommentar
Auf anderen Seiten teilen
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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
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>

Link zu diesem Kommentar
Auf anderen Seiten teilen
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) :-)

Link zu diesem Kommentar
Auf anderen Seiten teilen
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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
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>

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 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...