[CSS] Probleem met 100% hoogte van container div - Softwareontwikkeling

dinsdag 25 maart 2008 14:31

Acties:

Topicstarter

Edit:
Opgelost dankzij MvBeest, HTML moet hoogte hebben wanneer je (x)HTML strict gebruikt..

Ik heb een probleem (en het is vast heel dom) maar ik ben er al 3 uur mee bezig dus ik weet het niet meer...

Achtergrondinformatie van het probleem:
Ik ben een site aan het bouwen met vaste breedte (840px) en wisselende hoogte. De site heeft een menu bovenin & rechts en een content gedeelte onder het menu. Dit is redelijk standaard. De site moet de viewport voor 100% vullen in de hoogte als de contents of het rechtermenu dit niet doet. Wanneer één van de twee groter is moet de site groter worden. Ook heeft de site als geheel een achtergrond.Dit is een afbeelding van 2500pixels hoog geplaatst in de horizontaal gecentreerde container div waarin alle andere divs zitten, mocht de hoogte van de site meer dan 2500pixels zijn dan wordt de achtergrond een kleur (de achtergrond afbeelding loopt uit in een gradiënt..)

Probleem
Alles werkt, zolang ik geen doctype in stel....
Doe ik dit wel (strict of transitional) dan groeit de container niet mee.

Om het probleem een beetje te versimpelen heb ik een code gemaakt die het probleem ook geeft, maar dan zonder de hele site eromheen.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Je moeder!</title>
<style>
    body {
        padding: 0;
        margin: 0;
        height: 100%;
    }
    div#wrapper {
        margin: auto;
        width: 840px;
        background: #F77;
        height:auto;
        min-height:100%;
    }
</style>
</head>
<body>
<div id="full"></div>
<div id="wrapper">
    Verticaal
</div>
</body>

In de betreffende pagina heb ik de 4 layers in de container laten floaten. Wanneer ik de layers absoluut positioneer t.o.v. de container blijft het probleem bestaan...

Met doctype
Afbeeldingslocatie: http://www.kz-ict.nl/doctypaan.jpg

Afbeeldingslocatie: http://www.kz-ict.nl/doctypaan.jpg

Zonder doctype
Afbeeldingslocatie: http://www.kz-ict.nl/doctypuit.jpg

[ Voor 4% gewijzigd door Makkelijk op 25-03-2008 14:54 ]

Badieboediemxvahajwjjdkkskskskaa

dinsdag 25 maart 2008 14:33

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Hier al eens gekeken?

[ Voor 40% gewijzigd door RobIII op 25-03-2008 14:34 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 25 maart 2008 14:35

Acties:

frankvdtillaart

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

Zoeken op height: veel resultaten.
Zoeken op min-height: geen resultaten.

Wellicht wordt min-height niet ondersteund door XHTML1-STRICT ?

Edit: http://forums.invisionpow...on/index.php/t164513.html een mogelijke oplossing? (body {...} aanpassen)

[ Voor 22% gewijzigd door frankvdtillaart op 25-03-2008 14:39 ]

Happy Blessings <3

dinsdag 25 maart 2008 14:40

Acties:

MvBeest

Probeer eens om de html een height te geven:

Cascading Stylesheet:

1	html, body { height: 100%; }

dinsdag 25 maart 2008 14:41

Acties:

Sebazzz

3dp

Check eerst eens je XHTML, vergeet het bestand ook niet op te slaan als *.xhtml anders heb je er niets aan. De volgende regels heb ik verbeterd:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css">
</html>

Dus de code is nu:

XML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Je vader!</title>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
                height: 100%;
            }
            div#wrapper {
                margin: auto;
                width: 840px;
                background: #F77;
                height:auto;
                min-height:100%;
            }
        </style>
    </head>
    <body>
        <div id="full"></div>
        <div id="wrapper">
            Verticaal
        </div>
    </body>
</html>

Eerst correct XHTML gebruiken, de rest komt later. Gebruik anders gewoon HTML strict.

Probeer trouwens eens te zoeken op faux columns, dat is wat je waarschijnlijk bedoeld.

[ Voor 9% gewijzigd door Sebazzz op 25-03-2008 14:48 ]

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

dinsdag 25 maart 2008 14:50

Acties:

Makkelijk

Topicstarter

Sebazzz schreef op dinsdag 25 maart 2008 @ 14:41:
Check eerst eens je XHTML, vergeet het bestand ook niet op te slaan als *.xhtml anders heb je er niets aan. De volgende regels heb ik verbeterd:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css">
</html>
Probeer trouwens eens te zoeken op faux columns, dat is wat je waarschijnlijk bedoeld.

Ik waardeer je inzet, alleen ik heb deze code alleen voor dit voorbeeld gemaakt zoals ik zei. Ik weet ook wel dat de code niet goed was, maar dit maakt voor het resultaat niets uit...

MvBeest schreef op dinsdag 25 maart 2008 @ 14:40:
Probeer eens om de html een height te geven:
Cascading Stylesheet:
1
html, body { height: 100%; }

HELD!!!!

[ Voor 13% gewijzigd door Makkelijk op 25-03-2008 14:51 ]

Badieboediemxvahajwjjdkkskskskaa

dinsdag 25 maart 2008 14:55

Acties:

frankvdtillaart

Makkelijk schreef op dinsdag 25 maart 2008 @ 14:50:
[...]

HELD!!!!

ksst, ik was eerder en heb je nog hints gegeven waarop je de volgende keer zelf kunt zoeken (XTHML, min-height), eerste pagina in google.

Owh, en dat ksst is maar een grapje hoor.

Hoop dat het je de volgende keer zelf lukt.

Happy Blessings <3

dinsdag 25 maart 2008 15:59

Acties:

Makkelijk

Topicstarter

RedSoniq schreef op dinsdag 25 maart 2008 @ 14:55:
[...]

ksst, ik was eerder en heb je nog hints gegeven waarop je de volgende keer zelf kunt zoeken (XTHML, min-height), eerste pagina in google.

Owh, en dat ksst is maar een grapje hoor. Hoop dat het je de volgende keer zelf lukt.

Mjah, ik kon het niet direct uit die forum posts op maken, tevens refreshede ik dit topic en toen waren er 4 reacties dus ach dan is die andere wel duidelijker he?

Badieboediemxvahajwjjdkkskskskaa