[(x)html/css/javascript] height maximaal in div/td - Softwareontwikkeling

zondag 16 oktober 2005 12:23

Acties:

Topicstarter

Wat ik wil is dat de middelste table data of div het venster opvult. Dan kan je iets maken als bijvoorbeeld:

<table height="100%" border="1">
<tr>
<td height="50px">table data 1</td>
</tr>
<tr>
<td height="100%">table data 2</td>
</tr>
<tr>
<td height="50px">table data 3</td>
</tr>
</table>

In dit voorbeeld zal de cel "table data 2" de maximaale beschikbare ruimte opvullen zonder dat er scrollbars komen. Dit werkt alleen als je geen doctype instelt. Hoe krijg je dit zelfde effect voor elkaar met een doctype van html 4.01 of xhtml 1.0? Zonder doctype werkt het maar helaas met niet meer.

zondag 16 oktober 2005 12:26

Acties:

Borizz

Cascading Stylesheet:

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

If I can't fix it, it ain't broken.

zondag 16 oktober 2005 12:38

Acties:

jagermaster

Topicstarter

dit zegt alleen dat de body 100% moet zijn. Oke dat hoorde nog in het voorbeeld erbij te staan. Hiermee los je niet op dat als je een doctype gebruikt de table data 2 (<td height="100%">) even groot wordt als de pagina. Wat ik wil is een effect dat eruit ziet als het volgende:
Afbeeldingslocatie: http://puinweb.nl/fok/table.jpg

Afbeeldingslocatie: http://puinweb.nl/fok/table.jpg

de bovenste en onderste table data = 50px en de middelste vult het geheel op zodat de table minimaal 100% van het beeldscherm is en als het nodig is (omdat er meer tekst in table data 2 staat) langer is.

zondag 16 oktober 2005 12:49

Acties:

Borizz

Die 100% height op body en html heb je wel degelijk nodig om de tabel op 100% hoogte te krijgen. Heb je het wel geprobeerd?

If I can't fix it, it ain't broken.

zondag 16 oktober 2005 13:01

Acties:

Borizz

Volgende code werkt in ieder geval wel goed. IE rendert de pagina niet volgens de standaarden in standards compliance mode (met doctype dus), dus vandaar het commentaar voor het doctype. Firefox en Opera doen dit wel goed.

HTML:

<!-- Quirksmode in IE -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <head><title></title>
        <style type="text/css">
            html, body { height: 100%; margin: 0; }
            table { height: 100%; }
            #cell1, #cell3 { height: 50px; background-color: green;}
            #cell2 { height: auto; vertical-align: top;}
            
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td id="cell1">50px</td>
            </tr>
            <tr>
                <td id="cell2">de rest
                    
                </td>
            </tr>
            <tr>
                <td id="cell3">50px</td>
            </tr>
        </table>
    </body>
</html>

If I can't fix it, it ain't broken.

zondag 16 oktober 2005 13:07

Acties:

jagermaster

Topicstarter

Borizz schreef op zondag 16 oktober 2005 @ 12:49:
Die 100% height op body en html heb je wel degelijk nodig om de tabel op 100% hoogte te krijgen. Heb je het wel geprobeerd?

jep.. heb ff het voorbeeldje online gezet op http://jaap.puinweb.nl/test.html

de code die gebruikt wordt (even wat netter dan het voorbeeldje)

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>blabla</title>
 <style type="text/css">

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

table, td {
border: 1px solid black; vertical-align: top;
}

#table {
height: 100%;
}

#td_1 {
height: 50px;
}

#td_2 {
height: 100%;
}

#td_3 {
height: 50px;
}

 </style>
</head>

<body>

<table id="table">
 <tr>
  <td id="td_1">table data 1</td>
 </tr>

 <tr>
  <td id="td_2">table data 2</td>
 </tr>

 <tr>
  <td id="td_3">table data 3</td>
 </tr>

</table>

</body>
</html>

zondag 16 oktober 2005 13:09

Acties:

jagermaster

Topicstarter

Borizz schreef op zondag 16 oktober 2005 @ 13:01:
Volgende code werkt in ieder geval wel goed. IE rendert de pagina niet volgens de standaarden in standards compliance mode (met doctype dus), dus vandaar het commentaar voor het doctype. Firefox en Opera doen dit wel goed.
HTML:
1
knip

maar ook als ik deze code gebruik in IE pakt ie hem niet goed.. hoe krijg ik het daar ook normala werkend in?

zondag 16 oktober 2005 13:10

Acties:

jagermaster

Topicstarter

jagermaster schreef op zondag 16 oktober 2005 @ 13:09:
[...]
maar ook als ik deze code gebruik in IE pakt ie hem niet goed.. hoe krijg ik het daar ook normala werkend in?

zie nu dat ie wel goed werkt.. cache van IE deed nie goed mee.. tnx!

maandag 17 oktober 2005 00:10

Acties:

Liquid-Man

Misschien al te laat, maar ik heb het nu ook bij me site.
Ik gebruik tabellen en dan heb ik het zo opgelost:

code:

<table width="800" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="800" height="100">Hier de header
  </td>
 </tr>
 <tr>
  <td width="800">Hier dan alle content
  </td>
 </tr>
 <tr>
  <td width="800" height="100">Hier de footer
  </td>
 </tr>
</table>

Werkt vrij makkelijk, omdat de middelste rij geen hoogte heeft meegekregen en de hele tabel op 100% staat, maakt hij alles zo dat hij ook alles vullend is en omdat de andere 2 wel een hoogte hebben meegekregen blijven die wel gewoon 100px (voor eventueel voorbeeld kan ik wel me site geven...)

maandag 17 oktober 2005 10:30

Acties:

Sappie

De Parasitaire Capaciteit!

Waarom tabellen gebruiken als het ook anders kan? bijvoorbeeld zo:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>css only header / footer</title>
    <style type="text/css">      
        html {
          margin: 0; 
          height: 100%; 
          background: white;
        } 
        
        body {
          position: relative; 
          min-height: 100%; 
          _height: 100%; /* ie underscore hack */
          width: 580px;
          border-left: 1px solid black;
          border-right: 1px solid black;
          padding: 0 10px;
          margin: 0 auto;
          background: #eeeeee;  
        }
        
        #header {
            position: absolute;
            top: 0;
            left: 0;
            width: 580px;
            height: 79px;
            padding: 10px;
            border-bottom: 1px solid black;
            background: yellow;
        }
        
        #container {
          width: 580px; 
          padding: 110px 0 110px 0;
        }
        
        #footer {
          position: absolute; 
          bottom: 0;
          left: 0;
          border-top: 1px solid black;
          width: 580px;
          padding: 10px;
          height: 79px;
            background: yellow;
        }        
    </style>
</head>
<body>
  <div id="header">
    header
  </div>
  <div id="container">
    content
  </div>
  <div id="footer">
    footer
  </div>
</body>
</html>

[ Voor 9% gewijzigd door Sappie op 17-10-2005 10:30 ]

Specs | Audioscrobbler

Pagina: 1

Reageer