Toon posts:

Een div 100% height in een container

Pagina: 1
Acties:

Verwijderd

Topicstarter
Een onderwerp wat al een aantal keren de revu gepasseerd heeft binnen dit forum is het height: 100% onderwerp. En ik ben er nu ook tegenaan gelopen en heb tot op heden geen werkend antwoord kunnen vinden. Zelfs de manier op deze pagina van PPK lijkt niet te helpen link.

Mijn pagina.

Mijn CSS:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
body    {
    background-color: #9c9c9c;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    color: Black;
    line-height: 18px;
    margin: 0px;
    padding: 0px;
}
html, body  {height: 100%;}
a img   {border: none;}
img {border: none;}

/*MAIN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.main   {
    width: 740px;
    min-height: 100%;
    _height: 100%; /*IE only~~~~~~*/
    margin: 0px auto 0px auto;
    background-color: #9c9c9c;
}
.logo_left  {
    width: 106px;
    height: 257px;
    float: left;
    margin: 0px;
    background-image: url(images/logo.jpg);
    background-repeat: no-repeat;
}
.contentcontainer   {
    width: 634px;
    float: right;
    margin: 0px;
    background-color: #FF9804;
}

/*MENU
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.menu_container {
    width: 294px;
    height: 22px;
    margin-top: 235px;
    float: left;
}

/*CONTENT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.top    {
    width: 634px;
    height: 257px;
    margin-top: 0px; 
    text-align: left;
    background-image: url(images/top_home.jpg);
    background-repeat: no-repeat;
}
.content    {
    width: 454px;
    min-height: 100%;
    _height: 100%;
    text-align: left;
    padding: 40px;
    float: left;
    /*background-color: #e7e7e7;*/
    background-color: Lime;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 374px;
}
.projecten  {
    width: 180px;
    min-height: 100%;
    _height: 100%;
    float: right;
    /*background-color: #e7e7e7;*/
    background-color: Fuchsia;
}

Nu is het de bedoeling dat het content en het product kader 100% in height blijven, zelfs als er minder tekst in staat. De container 100% height mee geven hielp ook niet. Ik heb ook al lopen spelen met min-height en de underscore hack, maar ik denk dat ik de klok wel heb horen luiden maar de klepel nog niet gevonden heb. :?

Ik hoop dat er iemand is die mij het licht kan laten zien.

[ Voor 8% gewijzigd door Verwijderd op 23-01-2005 13:28 ]


  • Genoil
  • Registratie: Maart 2000
  • Laatst online: 12-11-2023

Verwijderd

Topicstarter
Bedankt, hij werkt nu goed.

Maar nu weet ik nog steeds niet of ik de manier waar ik in de start post mee werk ook werkend gekregen zou kunnen hebben. Het zou toch moeten kunnen denk ik.

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Verwijderd schreef op zondag 23 januari 2005 @ 11:43:
Maar nu weet ik nog steeds niet of ik de manier waar ik in de start post mee werk ook werkend gekregen zou kunnen hebben. Het zou toch moeten kunnen denk ik.
Geef de container dezelfde kleur als projecten, dat wekt dezelfde ilussie :) .

DM!


Verwijderd

Topicstarter
De kleuren heb ik alleen toegevoegd om het verschil in de layers duidelijk te maken.

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Verwijderd schreef op zondag 23 januari 2005 @ 12:08:
De kleuren heb ik alleen toegevoegd om het verschil in de layers duidelijk te maken.
Snap ik, maar je wilt lijkt me de illussie wekken dat je projecten div even hoog is als de content div. Nu ga ik er overigens wel vanuit dat je content div altijd minstens even hoog is als je projecten div. Dan kan je je container div dezelfde achtergrond kleur / stijl meegeven als je projecten div, dan lijkt het alsof deze 100% doorloopt tot de bodem.

DM!


Verwijderd

Topicstarter
JHS schreef op zondag 23 januari 2005 @ 12:27:
[...]

Snap ik, maar je wilt lijkt me de illussie wekken dat je projecten div even hoog is als de content div. Nu ga ik er overigens wel vanuit dat je content div altijd minstens even hoog is als je projecten div. Dan kan je je container div dezelfde achtergrond kleur / stijl meegeven als je projecten div, dan lijkt het alsof deze 100% doorloopt tot de bodem.
Helaas is de content div niet altijd even hoog als de projecten div, ze wisselen van hoogte ten opzichte van elkaar. Daarom wilde ik ook 100% height voor bijde gebruiken zodat ze zich in hoogte zouden aan passen aan elkaar, wanneer mogelijk.

[EDIT]
Probleem is opgelost met een clearrer div onder in de container div

[ Voor 6% gewijzigd door Verwijderd op 23-01-2005 14:06 ]

Pagina: 1