Notifikationer

Markér alle som læst Log ud

jahamnej Nybegynder

16. november 2005 - 16:07 Der er 18 kommentarer og
1 løsning

div scroll 100% i firefox

Hej,

Nogen der kender til problemet og løsningen med at lave en div scroll 100% i højden i firefox??

Alt jeg laver virker fint i IE, men den retter jeg sig jo heller ikke særligt meget efter standarden.

I firefox ser det fint ud hvis man ikke skal have sin div inde for noget. Hvis hele sidens indhold skal ind i den div, er det ligemeget, for så kan firefox godt finde ud af det.

Mange siger at firefox simpelthen ikke kan håndtere attributen height: 100%; , men det er forkert. Det kan den sagtens, men den skal også fatte hvad det er 100% af... laver man f. eks det her...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>suckmesidewaysstupiddivscroll</title>
</head>

<body>

<div style="width: 604px; height: 100%; overflow: auto;">
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
</div>

</body>
</html>

Viser firefox det uden problemer, da den bare kører ud i hele skærmstørrelsen.

Men er den inde i f. eks en tabel, går det galt. Også selvom tabellen og dens td er sat til 100%

Firefox skal på en eller anden måde fatte at den div skal være 100%, og det er 100% af den td den sidder i... for følgende virker ikke...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>

<table height="100%">
<tr>
<td>
<div style="width: 604px; height: 100%; overflow: auto;">
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
</div>
</td>
</tr>
</table>

</body>
</html>

Synes godt om

roenving Novice

16. november 2005 - 16:13 #1

Sæt en fuld doctype inkl. dtd-link, så skulle du kunne sådan:

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

<body>
<div style="width: 604px; height: 100%; overflow: auto; width:740px;margin:0 auto;">
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
</div>
</body>
</html>

Synes godt om

jahamnej Nybegynder

16. november 2005 - 16:24 #2

Tror ikke du forstod indlægget...

Jeps, det virker, hvis div bare ligger i body.

Men ikke hvis det ligger inde i en tabel (en tabel som også er sat til height: 100%)

Synes godt om

roenving Novice

16. november 2005 - 16:26 #3

Hvorfor skal det da inde i en tabel ?-)

Synes godt om

jahamnej Nybegynder

16. november 2005 - 16:29 #4

fordi det er en del af en større side, hvor kun en enkelt del skal scrolle, og samtidig med det, tilpasser hele siden sig efter brugerens opløsningen. Derfor skal denne scroller slå sig ud i 100%

Synes godt om

olebole Juniormester

17. november 2005 - 00:33 #5

<ole>

jahamnej >> Det er vist dig, der misforstår roenving - og ikke omvendt :)
Det skyldes, du ikke har sat højde på tabel-cellen ... og så kan du ikke sætte et indskrevet elements højde til 100%.

Ifølge CSS skal en relativ højde udregnes på baggrund af det omkransende elements højde ... der derfor skal sættes eksplicit :)

/mvh
</bole>

Synes godt om

jahamnej Nybegynder

17. november 2005 - 09:06 #6

hmm, ok...

Det gør jeg så også, og ja, det virker fint for mig i IE, men FireFox har bare ikke samme resultat. Den afgrænser området, men viser ingen scrollbar.

Prøv selv med følgende...

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

<body>
<table border="0" height="100%">
<tr>
<td height="100%">
<div style="height: 100%; overflow: auto; width:740px;margin:0 auto;">
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
</div>
</td>
</tr>
</table>
</body>
</html>

Synes godt om

jahamnej Nybegynder

17. november 2005 - 09:14 #7

Kan selvfølgelig godt se at det virker hvis tabellens celle er noget mere præcist, som f. eks 450px, men som jeg har slået fast, prøver jeg på at få den div i 100% til at virke inde i en tabel som også er 100% høj.

Synes godt om

roenving Novice

17. november 2005 - 09:50 #8

Hrm, det ser ud til at Gecko-motoren ikke opfatter en celle, som er sat til relativ højde for en eksplicit sat højde, og derfor udvider diven til indholdets højde ,-(

-- det gælder i hvert fald hvis man sætter gyldige højder i css ...

Synes godt om

olebole Juniormester

17. november 2005 - 12:06 #9

roenving >> Virker dette ikke hos dig (med 100% højde på body- og dokument-elementet):

<table style="height:100%">
<tr>
<td style="height:100%">
<iframe src="http://www.google.dk" style="height:100%"></iframe>
</td>
</tr>
</table>

Det funker hos mig i FF1.0.

Desuden tror jeg, vi skal passe på, hvad vi beskylder Gecko'en for - og hvad vi giver udviklerfællesskabet hos Moz for.
Således har min gamle Mozilla 1.5 - som jo også bygger på Gecko - en langt bedre DOM-håndtering ... og man kan stole på, at dens innerHTML faktisk også indeholder dokumentets reelle innerHTML. Det er langtfra tilfældet med min version af FF

Synes godt om

olebole Juniormester

17. november 2005 - 12:07 #10

"[...] og hvad vi giver udviklerfællesskabet hos Moz ansvaret for." ;o)

Synes godt om

roenving Novice

17. november 2005 - 12:24 #11

>>ole

-- har du prøvet eksemplet 17/11-2005 09:06:20 (med korrekte styles sæ'fø'li' ?-)

Synes godt om

olebole Juniormester

17. november 2005 - 12:33 #12

Ja ... nu har jeg. Det ser vist ud til, at vi her er stødt ind i endnu en af FF's utallige bugs - og det ser ud til, det i dette tilfælde netop skyldes Gecko :o(

Synes godt om

olebole Juniormester

17. november 2005 - 12:36 #13

Problemet synes at ligge i Gecko's tabelhåndtering. Dette funker jo fint:

<div style="height:100%">
<div style="height: 100%; overflow: auto; width:740px;margin:0 auto;">
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
blahblah blahblah blahblah blahblah 
</div>
</div>

Synes godt om

olebole Juniormester

17. november 2005 - 12:39 #14

- gad vide, om det bliver i vores levetid, man ser en browser, der bare kommer tæt på at overholde gældende standarderP

Synes godt om

roenving Novice

17. november 2005 - 12:43 #15

Tjah, man har jo lov til at håbe, at man bliver 100 år ...

Synes godt om

olebole Juniormester

17. november 2005 - 12:48 #16

- hmmmm ... skal det mon læses som:
"Jeg håber, jeg får endnu små 50 år med buggy browsere - og først dør, det øjeblik der endelig kommer én, der duer"? ;D

Synes godt om

roenving Novice

17. november 2005 - 12:58 #17

*lol*

Synes godt om

jahamnej Nybegynder

17. november 2005 - 13:46 #18

he, ret underligt at iframe virker i 100% inde i en tabel, men at div ikke gør.

desværre kan jeg ikke bruge iframen, da det bare komplicerer hele projektet.

Synes godt om

jahamnej Nybegynder

06. december 2005 - 23:54 #19

lukker

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS