Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Tabelle mit 100% Height

Empfohlene Antworten

Veröffentlicht

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

welchen browser benutzt du da? in meinem IE 6 gehts...

EDIT: fast, denn das obere <tr> ist 45 und das untere nur 22, aber der content nimmt 100% ein...

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

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%

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.

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>

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">

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) :-)

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.

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>

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.