/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Div height: 100%
Fra : hoaX


Dato : 21-03-03 13:00

Hey

Har et problem med at få en div til at fylde 100% af vinduets højde.
http://xystus.adr.dk/nidhug/index.html

Nogen der kan hjælpe? Det er den hvide div.

Så vil jeg også gerne have "kroppen" (main) til at fylde tomrummet mellem
menuen og copy, men den gode gamle * virker ikke. Hvad skal jeg så skrive?

- hoaX
----------------------------------------
hoaX's website-->
www.hoaxmusic.dk



 
 
Palle R. Jensen (21-03-2003)
Kommentar
Fra : Palle R. Jensen


Dato : 21-03-03 13:35

hoaX wrote in dk.edb.internet.webdesign.html:
> Hey
>
> Har et problem med at få en div til at fylde 100% af vinduets højde.
> http://xystus.adr.dk/nidhug/index.html

Giv os et link, hvor man kan læse css-filen, før kna i hvert fald ikke
hjæølpe :/

Palle

--
Danmarks største specialiserede IT jobdatabase
- Udelukkende med IT- og internetrelaterede jobs
- Opret en profil og lad drømmejobbet finde dig
KLIK HER! => http://www.html.dk/job

Erik Ginnerskov (21-03-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 21-03-03 13:45


"hoaX" <pt5@mail.dk> skrev
> Hey
>
> Har et problem med at få en div til at fylde 100% af vinduets højde.
> http://xystus.adr.dk/nidhug/index.html
>
> Nogen der kan hjælpe? Det er den hvide div.

Du skal nok i css definere, at body (ikke den hvide div) skal have højden
100% og margin 0 pixels.

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

Det bliver nok lidt lettere at styre - og holde styr på - hvis du giver
klassen til den hvide div et andet navn end et reserveret ord.

> Så vil jeg også gerne have "kroppen" (main) til at fylde tomrummet mellem
> menuen og copy, men den gode gamle * virker ikke. Hvad skal jeg så skrive?

Hvis du i css tildeler den hvide div en relativ position, kan du sætte copy
til en absolut position i bunden af den hvide div. Kroppen vil så kunne
udfylde rummet mellem menu og copy.

..hviddiv{
position:relative;
top:0px;
left:0px;
[øvrige definitioner for den div?]
}

..copy{
position:absolute;
bottom:0px;
left:0px;
[øvrige definitioner for den div?]
}

--
Med venlig hilsen
Erik Ginnerskov - erik snabela ginnerskov dot dk
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin





Lasse Reichstein Nie~ (21-03-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 21-03-03 13:55

"Erik Ginnerskov" <egin@SPAMKILLoncable.dk> writes:

> Du skal nok i css definere, at body (ikke den hvide div) skal have højden
> 100% og margin 0 pixels.
>
> html, body{
> height:100%;
> margin:0px;
> }
>

Husk "padding:0px" også. Opera bruger f.eks. en padding på body i
stedet for en margin (som foreslået af CSS-standarden :))

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jens Gyldenkærne Cla~ (21-03-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 21-03-03 13:53

hoaX skrev:

> Har et problem med at få en div til at fylde 100% af vinduets
> højde. http://xystus.adr.dk/nidhug/index.html
>
> Nogen der kan hjælpe? Det er den hvide div.

Hvide div? I mine browsere er alle elementer grå.

Generelt, har du sat margen, fyld og kanter til 0 alle relevante
steder?
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lasse Reichstein Nie~ (21-03-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 21-03-03 14:19

"hoaX" <pt5@mail.dk> writes:

> Hey
>
> Har et problem med at få en div til at fylde 100% af vinduets højde.
> http://xystus.adr.dk/nidhug/index.html
>
> Nogen der kan hjælpe? Det er den hvide div.

Some foreslået kan du brugr
html,body {height:100%;padding:0px;margin:0px;}
Hvis du gør det, så bliver du nødt til at fjerne den hvide kant omkring
body, da den ellers vil give body en bredde større end 100% (100%+2px),
så der komme scrollbars.

Der er for øvrigt ingen css-egenskab der hedder "margin-width". Enten
skal du bruge "margin-left" og "margin-right", eller du skal bruge
forkortelsen "margin: <topmargin> auto 0px;" til at give begge sider
auto-margin.

> Så vil jeg også gerne have "kroppen" (main) til at fylde tomrummet mellem
> menuen og copy, men den gode gamle * virker ikke. Hvad skal jeg så skrive?

Det er svært. Meget svært hvis det også skal virke i IE.

"*" virker ikke, det er en HTML-størrelse, ikke CSS (og den kan heller
ikke bruges i alle tilfælde)

Du kunne overveje at droppe dit meget faste design (med fast bredde på 750
pixels) og lave noget mere flydende. Fx:

html,body {
min-height:100%;
margin:0px;
padding:0px;
}
div.logo {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100px;
background:red;
}
div.menu {
position:absolute;
top:100px;
left:0px;
width:100%;
height:40px;
background:green;
}
div.main {
position:absolute;
top:140px;
left:0px;
width:100%
bottom:20px;
background:transparent;
}
div.copy {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:20px;
background:blue;
}

Jeg bruger farver til at adskille delene, da border kan give
størreslesproblemer. Hvis du vil have padding, margin, eller border på
de enkelte dele, så put en ekstra div indeni til det, og behold der
overordnede div'er som ren inddeling.

Det virker desværre ikke så godt hvis indholdet af main ikke kan være
på skærmen.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Lasse Reichstein Nie~ (21-03-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 21-03-03 14:26

Lasse Reichstein Nielsen <lrn@hotpop.com> writes:

Jeg opdagede lige at det virker bedre med en main der ikke er absolut
placeret, da den så vil virke selv med mere indhold end der kan være
på skærmen:

div.main {
margin-top:120px;
margin-bottom:20px;
}

(altså marginer der er store nok til at de resterende absolut
placerede elementer kan være i dem).

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Thomas Dybdahl osv (21-03-2003)
Kommentar
Fra : Thomas Dybdahl osv


Dato : 21-03-03 17:46

hoaX wrote in dk.edb.internet.webdesign.html:
> Hey
>
> Har et problem med at få en div til at fylde 100% af vinduets højde.
> http://xystus.adr.dk/nidhug/index.html
>
> Nogen der kan hjælpe? Det er den hvide div.

Prøv at putte height:100% på din div og alle dens parents tag. Du kan også
give den en min-height:; så er du jo i hvert fald sikker på den ikke bliver
for lille, hvis der er en browser der ikke kan vise den*.

*Problemet er bare at height:100%; understøttes bedre end min-height

--
Danmarks største specialiserede IT jobdatabase
- Udelukkende med IT- og internetrelaterede jobs
- Opret en profil og lad drømmejobbet finde dig
KLIK HER! => http://www.html.dk/job

hoaX (22-03-2003)
Kommentar
Fra : hoaX


Dato : 22-03-03 16:02

Tak for alle svarene. Jeg har lært en masse og nu ved jeg hvad jeg skal lave
de næste mange år

- hoaX
----------------------------------------
hoaX's website-->
www.hoaxmusic.dk



Søg
Reklame
Statistik
Spørgsmål : 177506
Tips : 31968
Nyheder : 719565
Indlæg : 6408561
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste