Avatar billede netro Nybegynder
22. december 2008 - 10:00 Der er 11 kommentarer

Celle med 100% højde

Følgende er en lidt amputeret udgave af mit layout, men det viser vist mit problem. Indholdet i den blå celle kan variere, og cellen tilpasser sig derfor i højden. Den gule tabel skulle gerne fylde hele højden, men det gør den ikke. Hvordan kan jeg løse det? Prøv evt. mit eks.

<!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" style="height:100%">
<head>
</head>

<body style="height:100%">
    <table cellspacing="0" border="1" style="width:100%; height:100%">
    <tr>
        <td style="height:100%; background:red">
            <table cellspacing="0" style="width:100%; height:100%; background:yellow" border="1">
                <tr>   
                    <td style="height:100%">
                        Højde: 100% 
                    </td>
                </tr>
            </table>                                     
        </td>
        <td style="height:100%; background:blue">
            <div style="height:2500px">En masse indhold</div>
        </td>
    </tr>
</table> 

</body>
</html>
Avatar billede mireigi Novice
22. december 2008 - 10:28 #1
Mener ikke at height:100% er valid når vi snakker tables.

Du kan dog prøve at give din body en højde i "px", så resten af tabellerne ved hvad de skal tage "100%" af.
Avatar billede netro Nybegynder
22. december 2008 - 10:35 #2
Jo, det virker bedre (bortset fra Opera), men indholdet kan slf. variere i højde, så jeg kan vel ikke bare give body en fast højde?
Avatar billede mireigi Novice
22. december 2008 - 10:45 #3
Ikke hvis indholdet varierer i længde nej.
Prøv at fjerne "height:100%" fra din røde td.
Avatar billede netro Nybegynder
22. december 2008 - 10:50 #4
Hvis jeg fjerner det, kollapser tabellen bare. Men hvad er alternativet så? For indholdet vil uundgåeligt variere i højde.
Avatar billede mireigi Novice
22. december 2008 - 10:58 #5
Fjern den gule tabel. Hvis den alligevel kun har 1 celle der skal være 100% af cellen den (tabellen) er indkapslet i, er der ingen grund til at have tabellen der.
Avatar billede netro Nybegynder
22. december 2008 - 11:09 #6
Det var det, jeg mente med "amputeret". Den gule tabel har i virkeligheden flere rækker/celler, der danner en baggrundsboks, som gerne skulle fylde hele højden.
Avatar billede roenving Novice
22. december 2008 - 14:43 #7
Du mangler at give det yderste element en højde, såvidt jeg kan se:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>!00% højde</title>
  <style type="text/css">
    html,body{margin:0;padding:0;height:100%;}
    .H100{height:100%;width:100%;border:1px solid black; border-collapse:collapse;}
    .H100 td{height:100%;border:none;}
  <style>
</head>

<body>
    <table class="H100">
    <tr>
        <td style="background:red">
            <table class="H100" style="background:yellow">
                <tr>   
                    <td>
                        Højde: 100% 
                    </td>
                </tr>
            </table>                                     
        </td>
        <td style="background:blue">
            <div style="height:2500px">En masse indhold</div>
        </td>
    </tr>
</table> 

</body>
</html>

-- og så vil du også kunne se problemerne med denne slags kodning, for det fremgår med al uønskelig tydelighed, at browserne fortolker det meget forskelligt, og det bliver nødvendigt at bruge forskellige stylesheets til IE og de andre browsere, som følger w3cs rekommendationer for fortolkning af højder !-)
Avatar billede netro Nybegynder
22. december 2008 - 15:08 #8
Jeg kan ikke se nogen forskel, når jeg bruger dit eksempel.

Men måske er jeg også mere interesseret i at se en "anden slags kodning"?
Avatar billede notes2c Nybegynder
22. december 2008 - 17:37 #9
Højden er beregnet ud fra dit omkransende element. I dit tilfælde har du defineret at html og body skal være 100%. Men du har defineret en div inde i en celle til at være 2500px men det ved dit body tag ikke noget om. Derfor får du denne opførsel, da det er mere end de 100%
Avatar billede netro Nybegynder
14. januar 2009 - 22:42 #10
Det lyder meget logisk. I må gerne lægge svar.
Avatar billede notes2c Nybegynder
15. januar 2009 - 17:16 #11
:-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester