Ausfüllen von ungenutzen Browser-Bereichen - Aber wie? von rig, 09.06.2006 17:20

Ausfüllen von ungenutzen Browser-Bereichen - Aber wie?

rig 09.06.2006 17:20

Hallo,

ich habe mit HTML-Tabellen/CSS sowas wie Karteikarten-Reiter implementiert. Nun ist die Menge der Daten auf den Karteikarten-Reitern unterschiedlich. Daher wollte ich, das die letzte Zeile der Tabelle den gesamten Bereich bis zum "Fensterboden" ausfüllt.

Mit der Angabe <table heigth="100%"> geht das, ist aber nicht HTML-Konform un das sollte die Seite sein. Die Style-Angabe "height" mit "%" wird aber komplett ignoriert. Und die Style-Angabe mit cm/px/etc versehen will ich nicht, da dann Scrollbalken entstehen.

Hat jemand einen Idee, wie ich das lösen kann?

Gruß
rig

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>  
   <head>  
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
      <title>Karteikarten</title>  
   </head>  
   <body bgcolor="#808080" link="#1f3f74" vlink="#1f3f74" alink="#660033">  
      <TABLE  style="width:100%; padding:0; margin:0; border:1px none gray; border-collapse:collapse;">  
         <colgroup>  
            <col style="width:2%;">  
            <col style="width:75%;">  
            <col style="width:23%;">  
         </colgroup>  
         <TR style="background-color:#808080;">  
            <TD>&nbsp;</TD>  
            <td>  
               <TABLE style="width:100%;padding:4;margin:0;border-width:0px; border-collapse:collapse;">  
                  <colgroup>  
                     <col style="width:15%;">  
                     <col style="width:15%;">  
                     <col style="width:15%;">  
                     <col style="width:15%;">  
                     <col style="width:15%;">  
                     <col style="width:23%;">  
                  </colgroup>  
                  <TR>  
                     <TD NOWRAP style="background-color:#C0C0C0; text-align:center; height:14pt; border-right:2px solid #808080; border-bottom:2px solid #C0C0C0;"><a href="ida$vr\_web\_tabcontrol.build\_tabcontrol?i\_nPage=2&amp;i\_nSort=-3&amp;i\_sDummy=-978147032" target="tab\_frame" STYLE="COLOR:#000000; TEXT-DECORATION:NONE; FONT-SIZE:8pt;">#1</a></TD>  
                     <TD NOWRAP style="background-color:#C0C0C0; text-align:center; height:14pt; border-right:2px solid #808080; border-bottom:2px solid #C0C0C0;"><a href="ida$vr\_web\_tabcontrol.build\_tabcontrol?i\_nPage=1&amp;i\_nSort=-3&amp;i\_sDummy=-978147032" target="tab\_frame" STYLE="COLOR:#000000; TEXT-DECORATION:NONE; FONT-SIZE:8pt;">#2</a></TD>  
                     <TD NOWRAP style="background-color:#C0C0C0; text-align:center; height:14pt; border-right:2px solid #808080; border-bottom:2px solid #C0C0C0;"><a href="ida$vr\_web\_tabcontrol.build\_tabcontrol?i\_nPage=3&amp;i\_nSort=-3&amp;i\_sDummy=-978147032" target="tab\_frame" STYLE="COLOR:#000000; TEXT-DECORATION:NONE; FONT-SIZE:8pt;">#3</a></TD>  
                     <TD NOWRAP style="background-color:#C0C0C0; text-align:center; height:14pt; border-right:2px solid #808080; border-bottom:2px solid #C0C0C0;"><a href="ida$vr\_web\_tabcontrol.build\_tabcontrol?i\_nPage=4&amp;i\_nSort=-3&amp;i\_sDummy=-978147032" target="tab\_frame" STYLE="COLOR:#000000; TEXT-DECORATION:NONE; FONT-SIZE:8pt;">#4</a></TD>  
                     <TD NOWRAP style="background-color:#C0C0C0; text-align:center; height:14pt; border-right:2px solid #808080; border-bottom:2px solid #C0C0C0;"><a href="ida$vr\_web\_tabcontrol.build\_tabcontrol?i\_nPage=5&amp;i\_nSort=-3&amp;i\_sDummy=-978147032" target="tab\_frame" STYLE="COLOR:#000000; TEXT-DECORATION:NONE; FONT-SIZE:8pt;">#5</a></TD>  
                     <TD NOWRAP style="background-color:#EEEEEE; text-align:center; height:14pt; border-right:2px solid #808080; border-bottom:2px solid #EEEEEE;"><span style="font-size:12pt; font-weight:bold;">Int-Info</span></TD>  
                  </TR>  
               </TABLE>  
            </td>  
            <TD>&nbsp;</TD>  
         </TR>  
         <TR style="background-color:#EEEEEE;">  
            <td style="text-align:left; vertical-align:top;" colspan="3">  
               <TABLE style="border:0px solid black; width:100%; padding:2px; margin:0px;">  
                  <tr>  
                     <td>  
                        <TABLE style="border-width:0px; width:100%; margin:0px; border-collapse:collapse;">  
                           <colgroup>  
                              <col style="width:28%;">  
                              <col style="width:72%;">  
                           </colgroup>  
                           <TR style="background-color:#D0D0D0;">  
                              <TH style="border:1px inset #808080; text-align:center; font-size:10pt;">Name</TH>  
                              <TH style="border:1px inset #808080; text-align:center; font-size:10pt;">Beschreibung</TH>  
                           </TR>  
                           <TR style="background-color:#FFFFFF;">  
                              <TD style="border:1px inset #808080; text-align:left; font-size:8pt;">&Uuml;bersicht #1</TD>  
                              <TD style="border:1px inset #808080; text-align:left; font-size:8pt;">[Beschreibung]</TD>  
                           </TR>  
                           <TR style="background-color:#EEEEEE;">  
                              <TD style="border:1px inset #808080; text-align:left; font-size:8pt;">&Uuml;bersicht #2</TD>  
                              <TD style="border:1px inset #808080; text-align:left; font-size:8pt;">[Beschreibung]</TD>  
                           </tr>  
                        </table>  
                     </td>  
                  </tr>  
               </table>  
            </td>  
         </tr>  
      <tr>  
         <td style="height:100%; background-color:#EEEEEE;" colspan="3">Hinweis: Diese Zelle sollte das Browser-Fenster bis unten auff&uuml;llen</td>  
      </tr>  
      </table>  
   </body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Ausfüllen von ungenutzen Browser-Bereichen - Aber wie?
wahsaga Homepage des Autors 09.06.2006 17:23

css
– Informationen zu den Bewertungsregeln
hi,

Mit der Angabe <table heigth="100%"> geht das, ist aber nicht HTML-Konform un das sollte die Seite sein. Die Style-Angabe "height" mit "%" wird aber komplett ignoriert.

Nein, wird sie nicht.

Sie wird auf die Höhe der Vorfahrenelemente bezogen.

gruß,
wahsaga

--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
Beitrag melden

–
Informationen zu den Bewertungsregeln
Ausfüllen von ungenutzen Browser-Bereichen - Aber wie?
Cyx23 10.06.2006 19:24

css
– Informationen zu den Bewertungsregeln
Hallo,

Mit der Angabe <table heigth="100%"> geht das, ist aber nicht HTML-Konform un das sollte die Seite sein.

Alternativ zur schon genannten zeitgemäßen Lösung per CSS könnte natürlich
noch versucht werden ein <td height=... mit geeignetem rowspan einzusetzen.

Und bei einer moderneren Lösung könnte auch auf das nowrap-Attribut
verzichtet werden, ausserdem würde ich die zahlreichen Inlinestyles
rausnehmen und entspr. das class Attribut verwenden.

Grüsse
Cyx23

--
Produktdesign
Beitrag melden

–
Informationen zu den Bewertungsregeln
Ausfüllen von ungenutzen Browser-Bereichen - Aber wie?
D.R. 10.06.2006 20:22

css
– Informationen zu den Bewertungsregeln
Hi,

Mit der Angabe <table heigth="100%"> geht das, ist aber nicht HTML-Konform un das sollte die Seite sein. Die Style-Angabe "height" mit "%" wird aber komplett ignoriert.

Da sind wir wieder beim guten alten Thema Prozentangaben. Erst mal vorweg: die Angabe wird nicht ignoriert.
Das Problem ist folgendes:
Du willst 100% aber wovon denn? Von dessen Elternelement wahrscheinlich. Was ist das? Natürlich, es ist der body. Wie hoch ist der? So hoch wie der Inhalt. Man müsste ihn wohl dazu verleiten, 100% hoch zu sein. Wie? mit height:100%. 100% von was? von html. Wie hoch ist html? So hoch wie der Inhalt. Also auch hier 100% zuweisen. Da HTML kein Elternelement hat, wird am Viewport gemessen und der ist 100% hoch.

Hier die gekürzte Variante:

html,body,table {height:100%;margin:0;padding:0;}

PS: Verzichte wenn möglich auf Layouttabellen und verwende CSS basierte Layouts.

Einen schönen Samstag noch!

--
Enjoy the Web!
Firefox 1.5
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

rig: Ausfüllen von ungenutzen Browser-Bereichen - Aber wie?