Problemer med height: 100%.

[buffey]

Jeg har nettopp begynt å lese litt om css (har vært stor fan av tabeller i flere år), men kom ikke veldig langt før jeg gikk i veggen. Jeg ønsker en enkel side med header, footer og to bars på hver side. For å få begge barene til å strekkes helt til bunnen av siden har jeg måttet definere høyden til html, body til 100%, og resten til prosent av det.

 

Link til problemsiden

 

Problemet kommer når det blir for mye tekst til at dette passer (med teksten som er der nå vil du få problemet om du sitter på en pc med 1024*768). Man kan se det om man gjør vinduet mindre, så all teksten i midten bruker mer plass, og sidebarene er lik høyden. Jeg ønsker at høyden på nettsiden skal defineres i forhold til hvor lang teksten i midten er (altså ikke en enkel overflow:auto). Jeg merket at om jeg definerer pixelstørrelser på sidebarene til litt mer enn plassen teksten tar (og tar bort height: 100% på html, body) vil det fungere, men da må jeg jo definere en annen pixelstørrelse for hver gang det blir en endring i antall linjer tekst.

 

Dette vil mest sannsynlig kunne fikses med en funksjon i php (eller ved bruk av tabeller i xhtml ), men det må da finnes en bedre måte å gjøre det på?

 

 

Takk for alle svar!

- Buff

[semafor]

Tabeller i XHTML er ikke noe annerledes enn tabeller i HTML. Det skal brukes til tabulære data, ikke layout.

 

Dette er ikke enkelt, men det jeg pleier å gjøre, er å sette en bakgrunn på body, for å simulere at div-er inne i body går "helt ned".

 

Sticky footer kan kanskje hjelpe deg.

[buffey]

Stickyfooter fungerte ikke slik jeg trengte, men jeg har nå begynt på en helt ny side, og har klart å komme forbi problemet med at den ikke strakk seg til teksten. Det nye problemet er at høyden til de forskjellige elementene må bli like (100% til sammen) for at den skal se lik ut i alle oppløsninger. Jeg bruker en blanding av % og px (10% størrelse på footer er bra på 1280*1024, men blir litt lite på mindre oppløsning), og jeg får det derfor ikke til å bli likt i forskjellige oppløsninger.

 

Link til problemside 2

 

Jeg lurer derfor på om det er mulig å sette høyden på et element til (X% - Ypx) på noen måte. (kreativ bruk av marginer og flere divs eller noe?)

 

- Buffey

Endret 9. april 2008 av buffey