Avatar billede recryl Nybegynder
29. juli 2009 - 01:19 Der er 6 kommentarer og
1 løsning

CSS DIV Height 100% Problem

Jeg har et problem med at få højden på en div-block til at være 100 %. En Googling afslører at andre har haft lignende problemer, men mit problem lader til at være anderledes - i hvert fald løser body { height: 100%;} det ikke.

Problemet beskrives lettest ved at vise det grafisk: http://tolblog.com/test-div.html (se evt. kildekoden)

Den røde block tilhører klassen "page", og burde altså strække sig helt ned til den gule footer-block (og i princippet også omslutte denne.) "Page" har height: 100%, og den er selv parent - så hvorfor går den ikke helt ned? Den resterende afstand svarer nøje til højden på header-block'en, hvilket burde være et tydeligt hint, men åbenbart ikke nok til at jeg kan gennemskue problemet. Det er somom "page"-block'ens "height"-værdi fratrækker højden på "footer"-block'en?

Hvordan får jeg den røde "page"-block til at få en reel height på 100%?
Avatar billede lollaenderen Nybegynder
29. juli 2009 - 06:29 #1
Det er opbygningen af siden der gør det.
Du beder om at page højden er 100% af det synlige af side højden.
Og det er lig det du får.
Prøv at ændre side højden i din browser op og ned, og skrol også op og ned.
Det er derfor det hvide har samme højde som header.
Var det til at forstå?
Avatar billede recryl Nybegynder
29. juli 2009 - 12:40 #2
Jeg forstår hvad du mener - sådan havde jeg egentlig ikke tænkt på det :) Men så må der skulle gøres noget andet end at bruge height: 100%.

A) Enten skal "page" have en egenskab som gør, at den får samme højde som dens indhold, og dermed går hele vejen ned.
B) Eller også skal "content" og "sidebar" have en egenskab som gør, at de ikke kan gå ud over grænserne for "page".

Jeg har set løsninger med javascript, men kan det virkelig ikke klares med CSS? Det er jo umiddelbart en ret simpel situation :)
Avatar billede olebole Juniormester
29. juli 2009 - 13:59 #3
<ole>

Normalt vil et element jo have samme højde som dets indhold, så det burde ikke være noget problem  =)

Derudover er der ingen, der siger, at alle designønsker skal kunne opfyldes i et HTML dokument. Kunsten for en designer ligger i høj grad i at vide, hvad der kan lade sig gøre - og designe til dét  ;o)

/mvh
</bole>
Avatar billede lollaenderen Nybegynder
29. juli 2009 - 19:27 #4
Jeg tror det vil virke hvis du indsatte en div bokse i til højre for Header og en imellem Content og Sidebar. Så kan du også indsætte i div boksene, det kan du ikke nu, så kommer det over Header.
Avatar billede lollaenderen Nybegynder
29. juli 2009 - 20:07 #5
Så virker siden i FF 3.5 og IE 8:
http://bjarnekroghhansen.dk/download/div.html
Avatar billede recryl Nybegynder
18. august 2010 - 14:52 #6
Udmærket - tak for opfølgningen. Hvis du lægger et svar, afgiver jeg point :)
Avatar billede recryl Nybegynder
30. september 2010 - 00:47 #7
Lukker tråden.
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