[(D?)HTML] 100% breedt en 100% hoog <div> met vert.scrollbar

[Morphine]

Heren het gaat om het onderste stuk code:

code:

    <div width="100%" style="height: 100%; overflow: Auto;">
        [img]"afbeelding.jpg"[/img]<br>
</div>

Deze <div> heeft een 100% breedte en 100% hoogte.
Nu wordt de div alleen automatisch 2000pixels breedt omdat hier een afbeelding instaat van deze breedte.

De bedoeling is echter dat:
- De hoogte en breedte de max breedte van het userscherm aannemen
- De content verticaal gaat scrollen, ongeacht de content

Uiteindelijk wil ik dus zoiets: http://home.wanadoo.nl/mr.morpheus/uiteindelijk.jpg
= Geen scrollbars van de website zelf, maar een scrollbar daarin die verticaal scrolt, en nie horizontaal

---

Wat een verhaal voor zo'n probleem. Maargoed ik wil dus absoluut geen frames gaan gebruiken, omdat .. nou goed: waarom lijkt me logisch voor een gemiddelde html-er

Heb al wat meer met de overflow functie gespeeld, maar deze lost het helaas niet op.

[ Voor 48% gewijzigd door Morphine op 06-02-2005 22:58 ]

[Verwijderd]

code:

style="width:100%;...etc"

[Geert.H]

ehm... basic css

code:

<div style=" width:100%; height:100%; overflow-x: auto; overflow-y:none;">
        [img]"afbeelding.jpg"[/img]
</div>

[ Voor 22% gewijzigd door Geert.H op 07-02-2005 07:35 ]

[LEiPiE]

Ghoekzema schreef op maandag 07 februari 2005 @ 07:35:
ehm... basic css

code:

<div style=" width:100%; height:100%; overflow-x: auto; overflow-y:none;">
        [img]"afbeelding.jpg"[/img]
</div>

Waar haal je overflow-x en overflow-y vandaan?
Ik ben alleen bekend met http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

[Morphine]

Ghoekzema schreef op maandag 07 februari 2005 @ 07:35:
ehm... basic css

code:

<div style=" width:100%; height:100%; overflow-x: auto; overflow-y:none;">
        [img]"afbeelding.jpg"[/img]
</div>

Opzich werkt dit prima op het feit na dat als ik boven en onder deze div een afbeelding plaats, dat de 100% hoogte niet meer klopt.

code:

    [img]"site/i/tempiframe.jpg"[/img] 
    <div style=" width:100%; height:100%; overflow-x: auto; overflow-y: auto;">
        [img]"site/i/tempiframe.jpg"[/img] 
    </div>
    [img]"site/i/tempiframe.jpg"[/img]

Hoe los ik dit op ?

[ Voor 81% gewijzigd door Morphine op 07-02-2005 19:13 ]

[iain]

Morphine schreef op maandag 07 februari 2005 @ 18:50:
[...]
Opzich werkt dit prima op het feit na dat als ik boven en onder deze div een afbeelding plaats, dat de 100% hoogte niet meer klopt.
Hoe los ik dit op ?

Dat gaat alleen door middel van Javascript.
Officieel mag je zelfs niet eens height: 100% doen in CSS... alleen absolute waarden mogen bij height ingevuld worden. Dat sommige browsers dat toch toestaan is wel heel lief

[JHS]

Mellon schreef op maandag 07 februari 2005 @ 22:39:
[...]Officieel mag je zelfs niet eens height: 100% doen in CSS...

ohnee? .

[iain]

JHS schreef op maandag 07 februari 2005 @ 22:46:
[...]
ohnee? .

had CSS level 2 revision 1 nog niet gezien... * iain is niet echt up to date dus...

edit:
het probleem waar je dan mee zit, is de vraag "wat is 100%". 100% wordt opgevat als 100% van het blok waarin het zit. Zit je div dus gelijk in je body, dan is het dus even hoog als je browservenster. Plaats je daarna nog een plaatje daar onder, dan komt dat moet je dus scrollen. wat je zou moeten doen is 100% minus de hoogte van het plaatje. Nou kan je geen absolute waarde aftrekken van een relatieve, dus moet je met javascript eerst de relatieve hoogte van het venster omzetten naar een absolute waarde...

[ Voor 50% gewijzigd door iain op 07-02-2005 23:24 ]

[Morphine]

Mellon schreef op maandag 07 februari 2005 @ 23:20:
[...]
had CSS level 2 revision 1 nog niet gezien... * Morphine is niet echt up to date dus...

edit:
het probleem waar je dan mee zit, is de vraag "wat is 100%". 100% wordt opgevat als 100% van het blok waarin het zit. Zit je div dus gelijk in je body, dan is het dus even hoog als je browservenster. Plaats je daarna nog een plaatje daar onder, dan komt dat moet je dus scrollen. wat je zou moeten doen is 100% minus de hoogte van het plaatje. Nou kan je geen absolute waarde aftrekken van een relatieve, dus moet je met javascript eerst de relatieve hoogte van het venster omzetten naar een absolute waarde...

100% mee eens (alleen wat gebeurt er dan als je het scherm handmatig verkleind? worden ook de toolbars bekeken: oftewel is dit wel écht de oplossing?)

Maar verder is dit dus niet op te lossen door een tabel erin te plaatsen heb ik gemerkt.
En op het feit na dat ik 1% JavaScript kennis beschik zal ik of, iemand hier lief aan moeten kijken , of met frames moeten gaan werken (iframe is ook geen oplossing, zit je weer met het 100% hoogte prob.)

[ Voor 8% gewijzigd door Morphine op 08-02-2005 09:34 ]

[iain]

Morphine schreef op dinsdag 08 februari 2005 @ 09:33:
[...]

100% mee eens (alleen wat gebeurt er dan als je het scherm handmatig verkleind? worden ook de toolbars bekeken: oftewel is dit wel écht de oplossing?)

Je moet van de berekening een functie maken die de hoogte aanpast. Deze functie roep je vervolgens aan:

HTML:

<body onresize="berekenHoogte();">

Dit werkt ook als je dus je scherm handmatig verkleind... Wat je moet doen is iets van document.getElementById("divnaam").height=document.innerHeight - "200px"; oid gebruiken. Maar dat werkt alleen in IE en Opera, geloof ik. FF heeft ook een functietje daarvoor, maar dat zou je even moeten opzoeken op mozilla.org. Ze hebben daar namelijk een vrij grote javascript glossary.

Maar verder is dit dus niet op te lossen door een tabel erin te plaatsen heb ik gemerkt.

jahoor, alleen dat is vies. Gewoon de td met een variabele hoogte niets aan opgeven. De rest een vaste waarde geven en de hoogte van de table op 100%. Dan wordt die ene cel automatisch uitgerekt.

[ Voor 18% gewijzigd door iain op 08-02-2005 14:56 ]

[Morphine]

Mellon schreef op dinsdag 08 februari 2005 @ 14:54:
[...]
Je moet van de berekening een functie maken die de hoogte aanpast. Deze functie roep je vervolgens aan:

HTML:

<body onresize="berekenHoogte();">

Dit werkt ook als je dus je scherm handmatig verkleind... Wat je moet doen is iets van document.getElementById("divnaam").height=document.innerHeight - "200px"; oid gebruiken. Maar dat werkt alleen in IE en Opera, geloof ik. FF heeft ook een functietje daarvoor, maar dat zou je even moeten opzoeken op mozilla.org. Ze hebben daar namelijk een vrij grote javascript glossary.

[...]
jahoor, alleen dat is vies. Gewoon de td met een variabele hoogte niets aan opgeven. De rest een vaste waarde geven en de hoogte van de table op 100%. Dan wordt die ene cel automatisch uitgerekt.

Dat 2e klinkt een stuk liever (en makkelijker dan )

[Surkow]

Morphine schreef op zondag 06 februari 2005 @ 22:56:
Heren het gaat om het onderste stuk code:

code:

    <div width="100%" style="height: 100%; overflow: Auto;">
        [img]"afbeelding.jpg"[/img]<br>
</div>

Deze <div> heeft een 100% breedte en 100% hoogte.
Nu wordt de div alleen automatisch 2000pixels breedt omdat hier een afbeelding instaat van deze breedte.

De bedoeling is echter dat:
- De hoogte en breedte de max breedte van het userscherm aannemen
- De content verticaal gaat scrollen, ongeacht de content

Uiteindelijk wil ik dus zoiets: http://home.wanadoo.nl/mr.morpheus/uiteindelijk.jpg
= Geen scrollbars van de website zelf, maar een scrollbar daarin die verticaal scrolt, en nie horizontaal

---

Wat een verhaal voor zo'n probleem. Maargoed ik wil dus absoluut geen frames gaan gebruiken, omdat .. nou goed: waarom lijkt me logisch voor een gemiddelde html-er

Heb al wat meer met de overflow functie gespeeld, maar deze lost het helaas niet op.

Je kunt toch gewoon gebruik maken van width: auto & hight: auto? En als je helemaal geen breedte opgeeft, krijgt deze automatisch de waarde auto. Bedoel je zoiets als dit: http://jorik.zeepost.nl/bla2/

Edit:
Geen scrollbars van de website zelf, maar een scrollbar daarin die verticaal scrolt, en nie horizontaal? Maak gebruik van de waarde overflow: scroll.

[ Voor 20% gewijzigd door Surkow op 08-02-2005 17:17 ]