height: 100% probleempje

[brentnl]

Hoi, op deze website http://tinyurl.com/2urk8up heb ik een scrol balk probleem. Zoals je ziet zit er een verticale scrol balk welke geen nut heeft. Dit heeft te maken met height:100% van de wrapper.
Ook wordt er een stuk van de pagina afgesneden wanneer er content tot een bepaalde hoogte ingezet wordt. Klik maar op de video pagina, er staan 3 video's, maar op een klein beeldscherm zie je er maar 2 en een half.

Wanneer ik echter deze height: 100% weghaal, wordt alle content zichtbaar, maar strekt div content_container zich niet meer tot de onderkant van de pagina wanneer er zich weinig content bevindt (agenda pagina bijv.)

ik heb al een hoop gestoeid met de CSS, maar kom er niet uit..

anybody 

[pedes]

misschien dit:

in plaats van;

:
:

dit proberen:

:
:

de 'cr_bottom' binnen de 'wrapper' zetten
als ik even vlug kijk met firebug ... denk ik in die richting

Mvg,
Peter

[brentnl]

misschien dit:

in plaats van;

:
:

dit proberen:

:
:

de 'cr_bottom' binnen de 'wrapper' zetten
als ik even vlug kijk met firebug ... denk ik in die richting

Mvg,
Peter

cr_bottom? je bedoeld crowd_bg ? want die cr_bottom zit bij mij (met firebug) al binnen de wrapper.. zal het even proberen, maar die moet wel sticky aan de onderkant blijven...

EDIT:: het verplaatsen van crowd_bg binnen de wrapper kwam de website niet echt ten goede, sowieso als je via firebug deze hele div weghaalt veranderd dat niets aan het height probleem..

[Acorna078]

Heb je het volgende al geprobeerd?

Bij #content_wrapper de height: 100% weghalen en min-height: 500px; toevoegen.
Geen wijzigingen bij #wrapper; gewoon op height: 100% laten staan.
Bij #footer_wrapper 'clear: both' toevoegen.

De content_wrapper past zich dan aan aan de hoeveelheid content; als er te 'weinig' content staat wordt teruggevallen op de opgegeven minimale hoogte van het blok.

Ik denk dat dit wel in de buurt komt van wat je wil... Laat je even weten of het gelukt is?

[brentnl]

Heb je het volgende al geprobeerd?

Bij #content_wrapper de height: 100% weghalen en min-height: 500px; toevoegen.
Geen wijzigingen bij #wrapper; gewoon op height: 100% laten staan.
Bij #footer_wrapper 'clear: both' toevoegen.

De content_wrapper past zich dan aan aan de hoeveelheid content; als er te 'weinig' content staat wordt teruggevallen op de opgegeven minimale hoogte van het blok.

Ik denk dat dit wel in de buurt komt van wat je wil... Laat je even weten of het gelukt is?

Voor de pagina's met veel content is dit inderdaad de juiste oplossing, alleen zit je natuurlijk met het probleem dat die min-height een fixed aantal pixels is. Op een 17" monitor krijg je hierdoor (bij 600px) een scrollbalk, en bij mijn 24" scherm hou ik alsnog een gat open.

[Acorna078]

Voor de pagina's met veel content is dit inderdaad de juiste oplossing, alleen zit je natuurlijk met het probleem dat die min-height een fixed aantal pixels is. Op een 17" monitor krijg je hierdoor (bij 600px) een scrollbalk, en bij mijn 24" scherm hou ik alsnog een gat open.

Het moet ook werken met percentages...
Zie: http://www.w3schools.com/CSS/pr_dim_min-height.asp


Value Description
%Defines the minimum height in percent of the containing block

[brentnl]

Voor de pagina's met veel content is dit inderdaad de juiste oplossing, alleen zit je natuurlijk met het probleem dat die min-height een fixed aantal pixels is. Op een 17" monitor krijg je hierdoor (bij 600px) een scrollbalk, en bij mijn 24" scherm hou ik alsnog een gat open.

Het moet ook werken met percentages...
Zie: http://www.w3schools.com/CSS/pr_dim_min-height.asp


Value Description
%Defines the minimum height in percent of the containing block

klopt, ik kan de speling inderdaad dan wel kleiner maken, maar nog lukt het niet om de background precies te laten stretchen tot de footer zonder scrollbalk.
Dit moet toch gewoon mogelijk zijn?

het probleem zit hem volgens mij in het volgende; "height: 100%" gaat over het bovenliggende element, dat is in dit geval #wrapper, en daarboven ligt body,html met height: 100%.

De #content_container is dus 100% van de body, wat dus heel de pagina beslaat, alleen zit er ook nog een header boven van  279 pixels.. misschien dat ik iets met een negatieve margin kan doen..

[brentnl]

* schopt topic..

[pedes]

dit is wellicht wat je nodig hebt ...
http://ryanfait.com/sticky-footer/

grtz
Peter

[brentnl]

ik maak al gebruik van een sticky footer...  dus dat is het probleem niet lijkt me...

[Gregor]

Met Firebug eens wa geprobeerd en ik denk dat er twee dingen een rol spelen, nl. de hoogt van je achtergrondfoto en

Code: Select all

#content_container {
background-image:url("images/content_repeat.png");
background-repeat:repeat-y;
height:0;
overflow-x:hidden;
overflow-y:hidden;
width:865px;
}

In bovenstaand voorbeeld heb ik die ff op 0 gezet en toen was de scoll balk weg.

Gregor

[brentnl]

dat is dus heel het euvel, die height moet gedefinieerd worden om zo de background van die content_container over heel de hoogte te stretchen...

er moet gewoon ergens een fout in mijn code zitten, dat kan niet anders, het lijkt zo simpel!

[deactivated010521]

----------

[brentnl]

Het lijkt me veel eenvoudiger om de footer onder de content te plakken. Deze is dan niet alijd in beeld (bij pagina's met heel veel content) maar dit bespaard je een hoop gedoe.

Was toevallig net op deze site, waar ze ook aan de onderkant van de pagina een afbeelding hebben. Stoor me er niet aan dat de pagina niet helemaal uitgevuld is op het moment dat er wat minder content is: http://www.mindz.com/plazas/Social_Medi ... erdam/wiki

nja het plaatje op de achtergrond bestaat dus uit 2 delen, 1 background en 1 plaatje van die feestende mensen die onderaan blijft 'plakken'. Alleen dat plaatje heeft een uitsparing, net zo breed als dat content vlak.. dat heb ik gedaan zodat de foto wat breder kon worden zonder dat ik de foto moest repeaten (dubbele mensen ziet er minder leuk uit ).

Misschien dat een sticky footer toch wel gaat werken, zie nu pas dat ik een fixed footer heb ipv een sticky footer,.. ga even aan de slag.

[brentnl]

ook een sticky footer werkte niet... heb nu het content block maar zonder 100% uitgevoerd, dan wordt tenminste wel alles getoond als er veel op een pagina staat. Alleen op pagina's met weinig tekst gaat het dus fout ... http://tinyurl.com/2urk8up

iemand die nog suggesties heeft?