div probleem
Ik wil graag een div sidebar height op 100% zetten dat als de pagina groter word de sidebar meegroeit. hoe doe ik dat want als ik bij height 100% instel doet hij niets.
Hoe moet ik dit oplossen?
Gesponsorde koppelingen:
Maar goed, zonder een stukje relevante code is het erg lastig om je te helpen...
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.twoColElsLtHdr #sidebar1 {
float: left;
width: 12em;
background: #666666 url(sidebar.gif) repeat-x 100% 0;
padding: 0px 0;
}
float: left;
width: 12em;
background: #666666 url(sidebar.gif) repeat-x 100% 0;
padding: 0px 0;
}
Maar er komt helemaal geen afbeelding. De sidebar is denk ik niet heel belangrijk want dat is gewoon een div box.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#divnaam{
background:url(sidebar.gif) repeat-x #666;
min-height:600px;
height:auto !important;
height:600px;
width:120px;
margin:0px;
padding:0px;
}
background:url(sidebar.gif) repeat-x #666;
min-height:600px;
height:auto !important;
height:600px;
width:120px;
margin:0px;
padding:0px;
}
Quote:
Kijk nu eens goed naar de voorbeelden in die zoekresultaten. Het principe van faux columns berust op een combinatie van een achtergrondafbeelding en de juiste HTML met bijbehorende CSS code.Maar er komt helemaal geen afbeelding. De sidebar is denk ik niet heel belangrijk want dat is gewoon een div box.
Je krijgt dus een container-div met daarin je sidebar-div en je content-div. De achtergrondafbeelding is onderdeel van je container en niet van je sidebar of content div. De sidebar en content vallen over die achtergrondafbeelding in je container heen waardoor het lijkt alsof de sidebar-div meerekt. Maar in werkelijkheid doet hij dat helemaal niet, dat is enkel je achtergrondafbeelding die wel uitrekt omdat je container uitrekt...
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="main">
<div id="left">
sidebar
</div>
<div id="right">
de rest van je site ofzo
</div>
</div>
<div id="left">
sidebar
</div>
<div id="right">
de rest van je site ofzo
</div>
</div>
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
#main {
background: url(path/to/bg.jpg);
overflow: hidden;
}
#main #left {
width: 120px;
float: left;
}
#main #right {
width: 680px;
float: left;
}
background: url(path/to/bg.jpg);
overflow: hidden;
}
#main #left {
width: 120px;
float: left;
}
#main #right {
width: 680px;
float: left;
}
Als het in deze opbouw staat, moet het werken ;-).
