[css] height: 100%;

[Ibex]

Bij het maken van een nieuwe layout van mijn website wou ik alle inhoud in 1 grote div steken. Dit om deze div dan zo groot mogelijk te maken (in de hoogte) en 650px in de breedte.
Deze div heeft als functie om een zogezegde 'kantlijn' en achtergrondkleur voor mijn hele site te voorzien.

Om in Firefox, galeon en mozilla deze div 100% van de hoogte te laten innemen moet het volgende worden gedaan in de css: (de html-item in de css is bij IE, konqueror niet nodig.)

code:

html {
  height: 100%;
}
body {
  height: 100%;
}
div.center {
  height: 100%;
}

In dat geval krijg ik het resultaat dat de div mooi alle plek inneemt wanneer de inhoud kleiner is.



Wanneer ik dan echter zo danig veel inhoud neem dat er een schuifbalk moet komen, krijg ik het volgende:



Doe ik dan de

code:

html {
  height: 100%;
}

weg, dan klopt het wel volledig en is de layout wel perfect in orde.

Wanneer ik die html-item in de css echter gewoon direct weglaat, dan is bij niet veel layout de achtergrond gewoon niet doorlopend zoals hier:



De site is volgens de xhtml 1.1 normen gemaakt, en werkt met css. Het is de bedoeling dat ik geen tabellen gebruik.
De site is te vinden lokaal hier en de css kan men hier vinden. Gelieve wel niet in andere mappen rond te surfen aangezien die iets teveel figuren bevatten en dit is niet zo goed voor mijn limiet en upload. De urls zijn niet meer nodig nu, het kwestie om mijn verbinding iets te ontlasten.

Heeft iemand een oplossing voor dit probleem?

[ Voor 9% gewijzigd door Ibex op 28-05-2004 13:22 ]

[akakiwi]

Ik zou die <div> vastzetten op dezelfde hoogte als er ruimte over is op het scherm en dan de div laten scrollen.
Verder lijkt het erop dat je de content niet IN de div hebt staan, maar EROP.

[André]

Misschien bij de div.center de height: 100% weghalen? De div wordt automatisch wel groter als er meer content in komt.

[Clay]

100% is 100% van de parent, en dat is dus maximaal viewport hoogte. wat je kan doen is b.v.

code:

html,body {
   height:100%;
}

div#main {
   height:100%;
   min-height:100%;
}

   body > div#main {
      height:auto;
   }

_{'k zou main een id doen, geen class, vandaar de # in 't voorbeeld}

IE snapt die > niet, maar de rest wel, en die snappen toevallig ook min-height. IE interpreteert height als min-height, dus dan gaat alles goed. Wel ff op boxmodel letten met margin/padding/border enzo als je dit gaat doen.

[NomoDigger]

Dan blijft div niet groot bij te weinig content (zie 1e plaatje)

[Ramon]

wat ik vaak doe bij zulke dingen is een achtergrond image maken van 1 pixel hoog en zo breed als nodig is, deze bij de body te zetten in de CSS met de gewenste background-repeat, in dit geval y dus.

[ Voor 4% gewijzigd door Ramon op 28-05-2004 13:16 ]

[Ibex]

Clay schreef op 28 mei 2004 @ 13:12:
100% is 100% van de parent, en dat is dus maximaal viewport hoogte. wat je kan doen is b.v.

code:

html,body {
   height:100%;
}

div#main {
   height:100%;
   min-height:100%;
}

   body > div#main {
      height:auto;
}

_{'k zou main een id doen, geen class, vandaar de # in 't voorbeeld}

IE snapt die > niet, maar de rest wel, en die snappen toevallig ook min-height. IE interpreteert height als min-height, dus dan gaat alles goed. Wel ff op boxmodel letten met margin/padding/border enzo als je dit gaat doen.

Die

code:

body > div#main {
  height: auto;
}

heeft het idd gedaan. Bedankt

[CH4OS]

Je kan die div toch een background-image geven, en die dan door middel van background-attachment vast zetten?

Dan scroll de rest er toch gewoon overheen, mits je dat in een 2e div zet, binnenin de div met de background-image...

Dan maak je 1 kleine image... van een paar pixels... En die zet je dan met repeat op de X en Y...

Of werkt dat niet?

Krijg je dus dit zeg maar:

Cascading Stylesheet:

html, body{
    height: 100%;
}

body{
    text-align:center;
}

div#main{
    height: 100%;
    width: 650px;

    background-image: url(images/background.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
}

div#content{
   width: 650px;

    */Hier de rest van je CSS voor de content /*
}

[ Voor 35% gewijzigd door CH4OS op 28-05-2004 13:31 ]

[Ibex]

GJ-tje schreef op 28 mei 2004 @ 13:25:
Je kan die div toch een background-image geven, en die dan door middel van background-attachment vast zetten?

Dan scroll de rest er toch gewoon overheen, mits je dat in een 2e div zet, binnenin de div met de background-image...

Dan maak je 1 kleine image... van een paar pixels... En die zet je dan met repeat op de X en Y...

Of werkt dat niet?

Krijg je dus dit zeg maar:

Cascading Stylesheet:

html, body{
    height: 100%;
}

body{
    text-align:center;
}

div#main{
    height: 100%;
    width: 650px;

    background-image: url(images/background.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
}

div#content{
   width: 650px;

    */Hier de rest van je CSS voor de content /*
}

Dat zou denk ik wel werken, maar ik werk niet met een achtergrond figuur maar met een gewone achtergrondkleur.

[CH4OS]

Ibex schreef op 28 mei 2004 @ 13:37:
[...]

Dat zou denk ik wel werken, maar ik werk niet met een achtergrond figuur maar met een gewone achtergrondkleur.

Je kan dan toch een background maken, van een paar px hoog, en een aantal tig px breed (of andersom)

En dan zet je background-repeat op repeat...
Dan herhaalt ie hem op de X en Y as En heb je dus hetzelfde effect...

[Ramon]

GJ-tje schreef op 28 mei 2004 @ 13:42:
[...]
Je kan dan toch een background maken, van een paar px hoog, en een aantal tig px breed (of andersom)

En dan zet je background-repeat op repeat...
Dan herhaalt ie hem op de X en Y as En heb je dus hetzelfde effect...

Ramon de Jesus schreef op 28 mei 2004 @ 13:15:
wat ik vaak doe bij zulke dingen is een achtergrond image maken van 1 pixel hoog en zo breed als nodig is, deze bij de body te zetten in de CSS met de gewenste background-repeat, in dit geval y dus.