100% height.......
Weet iemand hoe dat nou precies werkt en hoe niet?
Mijn html, body hebben 100%
Daarin heb ik #wrapcontent, met min-height: 100% en voor IE height: 100%
Daarin heb ik #left, met height: auto;, die nu zoals het hoort over de pagina doorloopt
Daar rechts naast heb ik boven elkaar #banner, #menu en #right, banner en menu hebben fixed heights, right is de content die dus flexheight moet hebben.
Als ik #right nu height: 100%, min-height:100%, height: auto; of allemaal geef, dan gebeurd er nog steeds niets.. En hij staat toch echt in diezelfde #wrapcontent.
Iemand enig idee wat en hoe dit werkt?
Code (php)
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
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
#wrapcontent
{
min-height: 100%;
width: 927px;
margin: 0 auto;
background: #FFF url(images/redline-1px.png) top left repeat-y; /* Faux column */
position: relative;
bottom: 30px;
}
* html > #wrapcontent
{
height: 100%;
}
#header
{
float: left;
width: 900px;
height: 91px;
margin-top:30px;
background: url(images/banner_bg.png);
}
#menu
{
height: 60px;
line-height: 30px;
vertical-align: middle;
width: 900px;
background: #000000 url(images/menubg2.png);
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
}
#left
{
width: 27px;
float: left;
height: auto;
margin-bottom: 30px;
}
#right
{
width: 900px;
float: left;
height: auto;
margin-bottom: 30px;
margin-left: 27px;
}
{
min-height: 100%;
width: 927px;
margin: 0 auto;
background: #FFF url(images/redline-1px.png) top left repeat-y; /* Faux column */
position: relative;
bottom: 30px;
}
* html > #wrapcontent
{
height: 100%;
}
#header
{
float: left;
width: 900px;
height: 91px;
margin-top:30px;
background: url(images/banner_bg.png);
}
#menu
{
height: 60px;
line-height: 30px;
vertical-align: middle;
width: 900px;
background: #000000 url(images/menubg2.png);
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
}
#left
{
width: 27px;
float: left;
height: auto;
margin-bottom: 30px;
}
#right
{
width: 900px;
float: left;
height: auto;
margin-bottom: 30px;
margin-left: 27px;
}
Gewijzigd op 01/05/2011 00:48:22 door Mark Tielemans
http://meyerweb.com/eric/tools/css/reset/ en deze reset is ook mooi: http://snipplr.com/view/4233/master-stylesheet/
@TS, ik zal er vanmiddag even naar kijken.
@Dillen, deze code is niet verplicht wel handig. Verder is het beter alle elementen te benoemen i.p.v. *. En als je 0 hebt hoeft er geen px achter, zonder is het sneller. Beter is de algemene CSS reset te nemen: @TS, ik zal er vanmiddag even naar kijken.
@Wouter 0 werkt niet in Firefox, er moet bij Firefox "px" achter. Probeer maar eens. En waarom alle elementen benoemen als je precies hetzelfde doet met: "*" ? Is dan toch onzin.
Maar ik heb idd de reset bovenin staan, dit is alleen het CSS van betrokken elementen. Ik dacht eerst dat het met float temaken had ik omdat ik ze daarmee uit de flow haal, dan is de parent dus geen 100% height meer.. Mogelijkheid?