13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)
  • Q:
    Bijdrager
    addyboy

    div tot aan bodem laten lopen

    Hallo allemaal,

    Ik heb een layout waarin ik maar 1 ‘collumn’ heb en deze wil ik tot op de bodem van de pagina laten lopen. Wat is de beste manier om dit te doen?

    Groeten, Ad

    Inactief
    Anoniem

    Als je bedoelt dat hij met de venstergrootte “mee moet rekken”, dan kan je height: 100% opgeven.

    Bijdrager
    addyboy

    Dit werkt dus helaas nooit. Het enige wat bedekt wordt is de content van de div… niet de ‘whitespace’

    Bijdrager
    AppleFlap

    werkt inderdaad niet.. wat je wel kan doen is de body een background geven (met CSS):

    [code:1:24cfc7a096]
    body {
    background: url("background.jpg") center center repeat-y;
    }
    [/code:1:24cfc7a096]

    en dan de div:

    [code:1:24cfc7a096]
    #container {
    margin: 0 auto;
    }
    [/code:1:24cfc7a096]

    dan staat de div in het midden en die achtergrond ook, dus dan lijkt het alsof de DIV gewoon tot onder doorloopt:)

    Bijdrager
    freshface

    Toon eens wat je bedoelt met een afbeelding.

    Bijdrager
    addyboy

    ja ik dacht ook aan die oplossing maar ik had gehoopt dat er misschien een oplossing was zonder plaatje/spacer.

    Bijdrager
    addyboy
    ”konijn”

    Toon eens wat je bedoelt met een afbeelding.

    Deze div moet dus tot aan beneden de pagina lopen (het witte stukje dus)

    Edit: whoops ietsje te breed, hij is ietsje ingedikt

    Bijdrager
    danielpunt

    Lukt het niet met

    margin: 0;
    height: 100%;

    :roll:

    Bijdrager
    addyboy
    ”muffin.”

    Lukt het niet met

    margin: 0;
    height: 100%;

    :roll:

    nope.. ik zal wel even de code geven:

    Xhtml code:
    [code:1:b8ee4766f6]<div id="header">
    </div>
    <div id="content">
    <div class="text">
    <div id="googleadds">
    Blabla add
    </div>
    <h2>The Frequently Asked Questions</h2>
    </div>
    </div>[/code:1:b8ee4766f6]

    CSS:
    [code:1:b8ee4766f6]body {
    background-color: #EBEBEB;
    font-size: 14px;
    color: #564b47;
    padding: 0;
    margin: 0 10%;
    }
    #header {
    position:relative;
    height: 160px;
    width: 650px;
    color: #564b47;
    background: #87C650 url(../images/header.png) no-repeat;
    }
    #content {
    position:relative;
    width: 650px;
    background-color: #FFFFFF;
    color: #564b47;
    }
    .text {
    padding: 0 10px 0 10px;
    background-color: #FFFFFF;
    color: #564b47;
    text-align: justify;
    margin: 0;
    height: 100%;
    }
    #googleadds {
    float: right;
    height: 300px;
    width: 100px;
    border: 1px dashed #564b47;
    padding: 2px;
    margin-left: 5px;
    }
    [/code:1:b8ee4766f6]

    Bijdrager
    hansenonline

    je moet volgens mij de content-div height:100% geven en niet de text, want die wordt bepaald door de height: 300px van je googleadds!
    heb nu geen zin om alles na te maken, maar dit lijkt mij de oplossing!

    Bijdrager
    tennapel

    [code:1:f5ca0f57e5]
    html, body {
    height : 100%;
    margin : 0;
    padding : 0;
    }

    #wrapper {
    height : 100%;
    width : 70%;
    background : white;
    }

    <body>
    <div id="wrapper">
    … alle overige div’s en HTML …
    </div>
    </body>
    [/code:1:f5ca0f57e5]

    Bijdrager
    addyboy

    Bedankt tennapel, dat was de juiste oplossing:)

    Bijdrager
    Es

    HIer was ik al, om precies te zijn, 6 uur naar op zoek; een layout met een vaste header en footer en een meerekkend midden!! Ik heb alles geprobeerd en had het bijna opgegeven en dan is de oplossing zo simpel! Dus ook namens mij: DANK!

13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.