WebmasterCity - Forum - (X)HTML/XML/CSS - [CSS] volledige hoogte voor afbeelding bg

Rihan
Elite Member

Offline

08-02-2010 20:32

hoi
ik heb een gecentreerde pagina gemaakt mbv divjes en css
hier heb ik een achtergrond afbeelding in
maar deze moet de volledige hoogte gebruiken
height: auto & 100% werken niet
als ik de pagina voor de helft heb gevuld met tekst, gaat die de achtergrondafbeelding maar voor die hoogte gebruiken
hoe vul ik m op de volledige grootte?

melvin
is lid.

Offline

08-02-2010 20:57

Misschien werkt min-height: 500px

Rihan
Elite Member

Offline

08-02-2010 21:47

uhm, min-height? hoezo. dat verschilt toch per resolutie..

Ferluci
Forum Beginner

Offline

08-02-2010 22:15

Dat komt waarschijnlijk doordat de parent geen hoogte heeft meegekregen. Zie ook dit artikel.

Wat je dus moet doen is de parent waar de div in staat een hoogte meegeven (waarschijnlijk is de body de parent):

Code

1
2
3


body {

    height: 100%;

}

Rihan
Elite Member

Offline

08-02-2010 22:30

huh
werkt niet
hij pakte bij 100% de resolutie
niet de hoogte van de pagina
als ik een pagina heb waarbij ik moet scrollen
dan wordt de achtergrond niet weergegeven onder het scroll gedeelte

Ferluci
Forum Beginner

Offline

08-02-2010 22:46

Ah, ik zie wat je bedoelt (ik had het zelf niet getest). Wat je dan kan doen is dat je een min-height meegeeft in plaats van een height:

Code

1
2
3
4
5
6
7
8
9
10


* {

    margin: 0px;

    padding: 0px;

}

body {

    height: 100%;

}

div {

    min-height: 100%;

}

Op deze manier heeft de div minimaal de hoogte van de browser, en als de inhoud langer is rekt de div mee uit. Natuurlijk wordt min-height weer niet door iedere browser ondersteund, dus dan heb je daar weer een fix voor nodig, maar die is genoeg te vinden op internet.

Rihan
Elite Member

Offline

08-02-2010 22:48

hmm, ill try

het werkt! (: danku

Rihan
Elite Member

Offline

22-02-2010 01:09

nu heb ik 3 kolommen, en krijg ik de boel niet 100% qua hoogte..

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >

<head>

<title>xx</title>

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="content-type" content="text/html;charset=utf-8" />







<style>



html, body{ 

 margin:0; 

 padding:0; 

 text-align:center; 

 height: 100%;

 background: indigo;

} 

 

#pagewidth{ 

 width:800px; 

 text-align:left;  

margin-left:auto; 

 margin-right:auto;  

 min-height: 100%;

} 

 

#header{

 position:relative; 

 height:155px; 

  background-color:orange; 

 width:100%;

} 

 

#leftcol{

 width:173px; 

 float:left; 

 position:relative; 

 background-color:purple; 

 }

 

#twocols{

    min-height: 100%;

 width:78%; 

 float:right; 

 position:relative; 

  }

 

#rightcol{

 width:172px; 

 float:right; 

 position:relative; 

 background-color:green;

 }

 

#maincol{background-color: pink;  

 float: left; 

 display:inline; 

 position: relative; 

 width:71%; 

 }

 

#footer{

 height:15px; 

  background-color:blue; 

 clear:both;

 } 

 



 

 /* *** Float containers fix:

.clearfix:after {

 content: "."; 

 display: block; 

height: 0; 

 clear: both; 

 visibility: hidden;

 }

 

.clearfix{display: inline-block;}



/* Hides from IE-mac \*/

* html .clearfix{height: 1%;}

.clearfix{display: block;}

/* End hide from IE-mac */  





 

 /*printer styles*/ 

 @media print{ 

/*hide the left column when printing*/ 

#leftcol{display:none;} 



/*hide the right column when printing*/ 

#rightcol{display:none;} 

#twocols, #maincol{width:100%; float:none;}

}



</style>

</head>

<body>

<div id="pagewidth" >

    <div id="header" > Head </div>



            <div id="wrapper" class="clearfix" > 

        <div id="twocols" class="clearfix"> 

            <div id="maincol" > Main Content Column </div>

            <div id="rightcol" > right Column </div>

        </div> 

            <div id="leftcol" > Left Column </div>

</div>

    <div id="footer" > Footer 

    </div>



    </div>

</body>

</html>

tis niet m'n eigen code, maar gegenereerd door zo'n site. en ik heb er al wat mee zitten kloten qua min-height en height op 100% enzo. maar het lukt niet goed. wie o wie ziet het foutje?

Rihan
Elite Member

Offline

22-02-2010 22:48

kut man, helemaal nergens werkt 100% height

LG
______________