[CSS] content div verticaal rekken

maandag 26 juli 2010 15:35

Acties:

0 Henk 'm!

Topicstarter

Ik heb totnutoe altijd tables gebruikt, maar probeer nu een website met divs te maken. Ik heb 3 divs: een header, de content, en een footer. De hoogte van de header is afhankelijk van wat daar in zit (logo + evt. wat tekst). Hetzelfde voor de footer. De content wil ik de overgebleven verticale ruimte laten opvullen (hier komt een Google Map in te staan). En dat opvullen lukt mij dus niet. De code die ik op dit moment heb (de verschrikkelijk lelijke kleuren zijn er alleen om de divs duidelijk te maken

):

HTML:

<html>
    <head>
        <title>titel hier</title>
        <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    </head>
    <body>
        <div id="container">
            <div id="header">header</div>
            <div id="main">de main</div>
            <div id="footer">copyright</div>
        </div>
    </body>
</html>

Cascading Stylesheet:

html, body              { height: 100%;
                          padding: 0;
                          margin: 0;
                          background-color: #CCC; }

#container              { background-color: #F00;
                          margin-left: 5%;
                          margin-right: 5%;
                          height: auto;
                          height: 100%;             /* for WinIE 6.0 and lower because it doesn't support min-height */
                          min-height: 100%;
                          position: relative; }     /* needed for footer positioning */
                          
#header                 { background-color: #3FC;
                          margin-bottom: 3px; }
                          
#main                   { background-color: #00F;
                          margin-bottom: 3px; }

#footer                 { background-color: #0F0;
                          font-size: 0.7em;
                          text-align: right;
                          bottom: 0;
                          position: absolute;
                          width: 100%; }

Voor zover ik weet ik er geen manier om te zeggen dat content hoogte = 100% - header hoogte - footer hoogte. Iemand enig idee hoe ik dit wel kan bereiken?
Alvast bedankt.

maandag 26 juli 2010 16:09

Acties:

0 Henk 'm!

Verwijderd

Dat kan inderdaad niet.

Gebruik daarom faux columns.

donderdag 29 juli 2010 18:47

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

En ga nou niet alleen divs gebruiken

Zie onder andere: http://home.parse.nl/~michiel/semantiek.html

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 30 juli 2010 09:41

Acties:

0 Henk 'm!

LinkinTED

Faux columns is denk ik niet wat hij zoekt, dat is meer als je werkt met een menu naast de content.

Wat de TS zoekt is dit: http://www.xs4all.nl/~peterned/examples/csslayout1.html
(bron bekijken)

vrijdag 30 juli 2010 13:44

Acties:

0 Henk 'm!

steennnn

de footer gewoon vastzetten onderaan de pagina en de header een hoogte geven.

http://ryanfait.com/resou...-stick-to-bottom-of-page/

zaterdag 31 juli 2010 19:59

Acties:

0 Henk 'm!

Verwijderd

Geen idee hoe ik het precies zat, maar met dit werkt het bij mij.

Cascading Stylesheet:

#body {
    width: 100%;
    background-color: #00433D;
}
#navcontainer {
    float: left;
    background: #00433D;
    width: 170px;
    margin: 0;
    padding: 5px;
    height: auto;
    color: #B6D0D8;
}
#contentcontainer {
    background-color: #427C94;
    margin: 0;
    padding: 5px;
    width: auto;
    margin-left: 180px;
    min-height: 340px;
}
#foot {
    text-align: right;
    color: #427C94;
}
#head {
    padding: .5em;
    background-color: #00433D;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px; 
}

In de css heeft de DIV body dezelfde bgc als navcontainer. Hierdoor lijkt het alsof de hoogte van de DIV navcontainer meerekt met de hoogte van de DIV content. Echter, de DIV body ligt én achter navcontainer, én achter content. De DIV content heeft een minimumhoogte, de DIV body heeft een autoheigt, maar omdat de DIV content BINNEN de DIV body valt, rekt de DIV body mee, en dus ook de, voor het oog de DIV navcontainer. In werkelijkheid blijft de DIV navcontainer altijd even hoog, enkel de DIV body gaat mee in hoogte.

en de HTML van index.php

HTML:

<?php include 'head.php'; ?>
<div id="body">
<div id="navcontainer">
<?php include 'navcontainer.php'; ?>
</div>
<div id="contentcontainer">
//content, variable
</div>
</div>

en respectievelijk van head.php en foot.php

HTML:

1
2
3

<div id="head">
//content
</div>

HTML:

1
2
3

<div id="foot">
//content
</div>

De inhoud van de content van de DIV contentcontainer zorgt voor de hoogte van de site.

--
edit: heb geloof ik de vraag niet helemaal goed gelezen, excuus

[ Voor 21% gewijzigd door Verwijderd op 31-07-2010 20:36 . Reden: Herschrijven laatste zin, verklaring CSS, excuus ]

Onderwerpen