Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

footer div uitvullen tot onderkant

None
14 antwoorden
  • Beste forumleden,

    Ik ben er een tijdje uitgeweest, maar nu heb ik weer eens een webprojectje.

    Ik zit nu met het volgende.
    voorbeeldje

    Ik wil dat de footer div tegen de onderkant van de containerdiv aan blijft plakken. Dit is geen probleem. Maar doordat de content van de site variabel is (en dus ook de hoogte) kan er een ruimte ontstaan onder de footerdiv.

    Deze wil ik daarom opvangen met een achtergrond kleur wit…

    Hoe kan ik dit nu het beste aanpakken? Kan ik de footerdiv een onbeperkte hoogte meegeven?

    Dank

    mvg,
    Tony
  • Als je de footer geen height meegeeft, dan is hij vanzelf al van onbeperkte grootte. Zet je meer content in de footer, dan wordt hij vanzelf groter; zet je er minder in, wordt de footer vanzelf kleiner. Evt. geef je een min-height mee als je graag toch minstens een kleine witruimte wilt zien, ongeacht of er iets in de footer staat. Of bedoel je het anders?
  • Ik neem aan dat hij bedoeld dat de footer moet lopen tot aan de onderkant van het browser venster als de content van de pagina kleiner is dan het browser venster.
    Je kan niet instellen dat de footer zo groot moet zijn dat ie de rest van het scherm vult. Je kan het denk ik op twee manieren aanpakken, net doen alsof de footer wel tot aan de onderkant van het scherm loopt door een container om de site te hebben die een hoogte van 100% heeft en een witte achtergrond. Of je kan ervoor zorgen dat de footer altijd, op zijn minst, aan de onderkant van het browser venster zit tenzij de content groter is dan het browser venster waarna hij mee beweegt (link).
  • Dank voor jullie antwoorden.
    Drewster heeft het idd bij het juiste einde.

    Ik ga vandaag eens verder spelen hiermee. Ik geef een update hier zodra ik iets heb.


    thanks :)
  • Ik heb nog lopen spelen met je voorbeeld Drewster.

    Hetgeen ik wil is idd dat de footer tegen de onderkant van het scherm staat. Indien de content groter is dan de schermgrootte, dan wil ik dat de footer mee omlaag beweegt.

    Hoe dan ook.. het wil me maar niet lukken.

    Ik twijfel nu of mijn algemene opzet wel juist is.
    (de onderlinge positionering van mijn afzonderlijke divs)

    Mijn aangepaste voorbeeld staat nog steeds hier.


    En wat betekend deze notatie uit jouw voorbeeld Drewster:
    [code:1:9f3be26e66]_height: 100%;[/code:1:9f3be26e66]

    Dit is mijn css
    (niet relavante code heb ik ff weggehaald (bv typografische zaken)

    [code:1:9f3be26e66]
    @charset "utf-8";
    /* CSS Document */

    body, html{
    background-image: url(../images/topper_bg.gif);
    background-repeat: repeat-x;
    background-color: #8b8b8b;
    margin: 0px;
    height: 100%;
    }

    #container{
    min-height: 100%;
    _height: 100%;

    }

    #holder{
    width: 900px;
    height: 100%;
    background-image: url(../images/header.gif);
    background-color: #151515;
    position: relative;
    background-repeat: no-repeat;
    margin-right: auto;
    margin-left: auto;
    }

    #navigatie{
    height: 20px;
    background-color: #FFF;
    top: 134px;
    position: relative;
    left: 330px;
    width: 550px;
    z-index: 1;
    }

    #logo{
    height: 146px;
    width: 300px;
    background-image: url(../images/logo.gif);
    background-attachment: fixed;
    background-repeat: no-repeat;
    }

    #left{
    width: 250px;
    height: 200px;
    top: 250px;
    position: relative;
    margin-left: 30px;
    font-weight: bold;
    }

    #content{
    width: 500px;
    left: 300px;
    color: #FFF;
    padding-bottom: 25px;
    position: relative;

    }

    #footer{
    height: 35px;
    background-color: #FFF;
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: #000;
    width: 100%;
    }

    [/code:1:9f3be26e66]
  • Ik heb ff heel snel gekeken en ik zag dat je de footer [i:33f1c72a1b]in[/i:33f1c72a1b] je container hebt staan en dan werkt het natuurlijk niet. Het idee is dat je container altijd (minimaal) schermvullend is, als je footer dan buiten je container staat wordt die dus helemaal naar beneden gedrukt, en eigenlijk buiten de "browser chrome". Door de container een negatieve margin te geven aan de onderzijden, gelijk aan de hoogte van de footer, past alles op de pagina.

    (als ik dat met firebug aanpas werkt het prima)
  • Achja, natuurlijk.. Ik zie het ook ja. Ik heb de footer nu buiten de holder gezet en het werkt idd prima.

    zie voorbeeld:

    Bedankt Drewster :)

    Ik ga vandaag weer verder met de site.. Ik zit nu nog ermee dat als de content (content div) groter wordt, dat deze dan over de footer heenloopt. Dit houdt dus in dat mijn holder niet groter wordt naarmate de content div groter wordt… (zal wel met de positioning ofzo te maken hebben.. ik heb daar altijd al de grootste moeite mee gehad…)

    Ach, het houd je tenminste van de straat ;)
  • Ik zit nu met het volgende en begrijp maar niet waar het aan ligt.

    voorbeeld

    Mijn content div valt bij te veel inhoud over de footer div heen.. Dit snap ik niet helemaal want als de content div groeit dan groeit ook de container div en de footer div staat weer tegen deze container aan…

    wat doe ik nu weer verkeerd dan? Of zie ik iets stoms over het hoofd? (ik heb al geprobeerd met z-index te werken maar dit gaf (zoals verwacht) geen resultaat.
  • Geef je footer position:relative mee (alleen gepositioneerde elementen reageren op z-index, waarom? geen idee), is een beetje een ducktape oplossing maar het werkt. Ik zou al die relatieve verplaatsingen eruit slopen, die zijn in mijn optiek niet perse nodig en maakt het allemaal wat onvoorspelbaar. Niet dat het niet werkt of dat het niet mag/hoort maar [i:227a51d918]ik[/i:227a51d918] hou de positionering het liefst zo simpel mogelijk.
  • thanks voor je reply. Het is gelukt.

    Ik moet me idd maar eens aanwennen om het positioneringsverhaal eens duidelijker te krijgen. Ik heb de onnodige relatives weggehaald en vervangen door geen positioning en mbv margins gewerkt.
  • [quote:3db6a07e12="Drewster"]alleen gepositioneerde elementen reageren op z-index, waarom? geen idee[/quote:3db6a07e12]Omdat alleen gepositioneerde elementen buiten de normale document flow vallen en daarom (mogelijkerwijs) over andere elementen heen vallen.

    - Bas
  • [quote:c84c193a8f="BasHamar"]Omdat alleen gepositioneerde elementen buiten de normale document flow vallen en daarom (mogelijkerwijs) over andere elementen heen vallen. [/quote:c84c193a8f]Elementen met en negatieve margin oid kunnen ook over elementen vallen, en je kan willen dat een ongepositioneerd element onder een element komt dat gepositioneerd is en je kan die alleen een z-indx geven als je hem ook positioneerd terwijl dat element niet perse gepositioneerd hoeft te worden.
  • Ik ga me ook eens wat meer verdiepen in het algehele positionerings verhaal.. Ik weet nog goed dat toen ik een jaar of tig geleden voor het eerst begon met het maken van sites zonder tabellen en frames… Toen had ik al moeite met de logica achter positioneren.. en dat is nu anno 2009 nog niet veel beter.

    Waarom bestaat eigenlijk "relative"… volgens mij heb je deze in theorie nooit nodig of wel? je kan het altijd wel op een andere manier oplossen dan? (door margins ofzo)

    Of zie ik dit verkeerd…

    en een "absolute" dan? Volgens mij is dit altijd te vervangen door een float mee te geven en deze middels margins? niet?
  • Ik vind relatieve posities inderdaad een beetje overbodig. Ik heb iig nooit de noodzaak gehad om die te gebruiken noch kan ik een situatie bedenken waarbij relatieve positie de enige oplossing zou zijn. "Absolute" positionering gebruik ik eigenlijk ook nooit maar ik me wel voorstellen dat het gebruikt word. De "fixed" positie is eigenlijk de enige positionering die je echt niet anders zou kunnen toepassen.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.