Avatar billede ducks Nybegynder
22. juni 2006 - 00:43 Der er 11 kommentarer og
1 løsning

<div> 100% i højden i Safari (Mac)

Jeg fik desværre lukket tdet her lidt for hurtigt: http://www.eksperten.dk/spm/716864

For jeg har lige opdaget, at Safari på Mac viser ikke div'en når man scroller ned. Dvs når man åbner siden kan man se <div>'en men når man begynder at scrolle opdager man at den mangler. (jeg håber det er til at forstå)
Avatar billede mm12010 Nybegynder
22. juni 2006 - 08:18 #1
har du et link til siden? er det kun den kombination(safari@mac) der er problemer med? virker det i mozilla@pc ?
Avatar billede mclemens Nybegynder
22. juni 2006 - 10:04 #2
height:100% = 100% af det synlige område ... ikke mere...
(Indrømmer dog at IE strækker den og at FF ikke gør, men
det er fordi at IE ikke overholder en height definering medmindre
den får en overflow:hidden smidt på div'en samtidig)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{padding:0px;margin:0px;height:100%;}
#diven{height:100%;background:#aaa;}
</style>

</head><body>
<div id="diven">Test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v</div>
</body></html>
Avatar billede mclemens Nybegynder
22. juni 2006 - 10:05 #3
Prøv evt. denne css del:

<style type="text/css">
html,body{padding:0px;margin:0px;height:100%;overflow:hidden;}
#diven{height:100%;background:#aaa;overflow:auto;}
</style>
Avatar billede mclemens Nybegynder
22. juni 2006 - 10:39 #4
Eller måske det her:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body{padding:0px;margin:0px;height:100%;}
body div{height:100%;background:#aaa;}

body > div {
  height: auto;
  min-height:100%;
}

</style>

</head><body>
<div id="diven">Test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v</div>
</body></html>
Avatar billede mclemens Nybegynder
22. juni 2006 - 10:41 #5
- Dog er det et css hack... Der gør at FF får leveret min-height mens IE får leveret height ... IE understøtter p.t. ikke min-height og låser ikke størrelsen ordentligt ved en almindelig height definering - det gør Firefox.
Avatar billede mclemens Nybegynder
22. juni 2006 - 10:58 #6
(men om noget af det virker i safari ved jeg ikke)
Avatar billede ducks Nybegynder
22. juni 2006 - 23:49 #7
html,body{padding:0px;margin:0px;height:100%;overflow:hidden;}
#diven{height:100%;background:#aaa;overflow:auto;}

virker fint bortset fra at så er scrollersne jo i div'en istedet for der hvor de normalt er placeret i en browser (helt til højre) kan jeg ik få dem rykket tilbage til den normale position? Og samtidig få højden iorden
Avatar billede mclemens Nybegynder
23. juni 2006 - 00:40 #8
10:39:27 er nok den bedste i det tilfælde ... det kan selvfølgelig også "fuskes afhængig af designet ... men det afhænger selvfølgelig af kontruktionen ... css - hacket er dog det hurtigste og letteste ... her er et par eksempler på fusk:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%; margin:0px;padding:0px;overflow:hidden;}

body{position:relative;top:0px;left:0px;background:#aaa;height:100%;width:100%;background:#fff;overflow-y:scroll;overflow-x:hidden;}

#diveno{position:absolute;top:0px;left:50%;margin-left:-385px;width:770px;height:100%;background:#aaa;}
#diveni{position:relative;background:#aaa;}
</style>
</head>
<body>

<div id="diveno">
<div id="diveni">Start<br>Test<br><br>Test<br>Test<br><br>Test<br><br>Test<br>Test<br><br>Test<br><br>Test<br>Test<br><br>Test<br><br>Test<br>Test<br><br>Test<br>Test<br>Test<br><br>Slut</div>
</div>

</body></html>







<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;}
</style>
</head>
<body><div style="position:relative;top:0px;left:0px;background:#aaa;height:100%;width:100%;background:#fff;overflow-y:auto;overflow-x:hidden;">


<div style="position:absolute;top:0px;left:0px;background:#aaa;height:50px;width:100%;">Test</div>


<div style="position:absolute;top:0px;height:100%;"><div style="position:relative;margin-top:50px;">Start<br>Test<br><br>Test<br>Test<br><br>Test<br>Test<br>Test<br><br>Slut<div style="height:50px;">&nbsp;</div>


<div style="position:absolute;bottom:50px;left:0px;background:#aaa;height:50px;width:100%;">Test</div>

</div></div>

</div></body></html>






<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;
margin:0px;padding:0px;overflow:hidden;}
</style>
</head>
<body><div style="position:relative;background:#aaa;height:100%;width:770px;margin:0px auto;background:#fff;overflow-y:auto;overflow-x:hidden;">


<div style="position:absolute;top:0px;left:0px;background:#aaa;height:50px;width:100%;">Test</div>


<div style="position:absolute;top:0px;height:100%;"><div style="position:relative;margin-top:50px;">Start<br>Test<br><br>Test<br>Test<br><br>Test<br>Test<br>Test<br><br>Slut<div style="height:50px;">&nbsp;</div>


<div style="position:absolute;bottom:50px;left:0px;background:#aaa;height:50px;width:100%;">Test</div>

</div></div>

</div></body></html>
Avatar billede mclemens Nybegynder
23. juni 2006 - 00:41 #9
Edit [ 10:39:27 er nok den bedste i det tilfælde ] nok udskiftes med ordet sikkert
Avatar billede mclemens Nybegynder
29. juli 2006 - 12:27 #10
Hjalp det?
Avatar billede ducks Nybegynder
25. august 2006 - 09:00 #11
Hej, undskyld jeg har haft meget travlt i den sidste tid, men jeg kigger på det hurtigst muligt
Avatar billede mclemens Nybegynder
08. september 2006 - 17:59 #12
Tak for point :)
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