Het klassieke probleem met 100% min-height lijkt als een rode draad door mijn html kennis te lopen.. of eerder als een splinter te steken. Het is me ooit gelukt om het voor elkaar te krijgen en nu lijkt het weer niet te lukken. Ik vroeg me af of mensen willen reageren en hun kennis hierover willen uiten. Alleen als je de vraag goed begrepen hebt alsjeblieft.
probleem:
Ik heb een eenvoudige test-pagina gemaakt om het probleem uitgekleed te tonen.
www.vasili.nl/speeltuin/100height.html
Een header, een middenstuk en aan weerzijden een kolom. De bedoeling is dat de drie div's doorlopen tot de onderkant van het scherm. Ik test dit nu enkel op firefox. En zelfs daar lukt het niet om alles door te laten lopen tot de onderkant. min-height: 100% lijkt in eerste instantie te werken.. maar zodra je het venster kleiner schaalt en er een scrollbalk komt en je gaat scrollen dan houden de div's op met doorlopen daar waar de onderkant van het scherm oorspronkelijk zat.
Ik moet dus een min-height oplossing hebben die werkt met lange inhoud (inhoud die doorloopt buiten het scherm) korte inhoud, en ook nog steeds doorloopt als je je venster heel klein hebt gemaakt en je begint te scrollen. Een crossbrowser oplossing is de laatste eis. Maar dit lijkt me minder problematisch. Daar heb ik al eerder mee te maken gehad. Ik wil het eerst werkend krijgen in firefox!
hieronder de code.. zoals je ziet ook container geprobeerd. Verder alles al gehad.. min-height, height.. auto.. combinaties etc. Begrijp er niks meer van!
hmm.. 100% min-height lijkt op de server opgelost te zijn (ontdekt tijdens het schrijven van deze topic) maar als het ding offline staat wil het niet. Ligt dat aan mijn doctype? Uiteindelijk moet ik een nieuwsbrief maken en die zijn offline.. iemand een offline oplossing voor min-height: 100% ?
De lelijke doorgestreepte verhalen heb ik er in gelaten voor degene die niet weten wat ik bedoel met het "100-min-height-probleem"
alvast bedankt!
probleem:
Ik heb een eenvoudige test-pagina gemaakt om het probleem uitgekleed te tonen.
www.vasili.nl/speeltuin/100height.html
Een header, een middenstuk en aan weerzijden een kolom. De bedoeling is dat de drie div's doorlopen tot de onderkant van het scherm. Ik test dit nu enkel op firefox. En zelfs daar lukt het niet om alles door te laten lopen tot de onderkant. min-height: 100% lijkt in eerste instantie te werken.. maar zodra je het venster kleiner schaalt en er een scrollbalk komt en je gaat scrollen dan houden de div's op met doorlopen daar waar de onderkant van het scherm oorspronkelijk zat.
Ik moet dus een min-height oplossing hebben die werkt met lange inhoud (inhoud die doorloopt buiten het scherm) korte inhoud, en ook nog steeds doorloopt als je je venster heel klein hebt gemaakt en je begint te scrollen. Een crossbrowser oplossing is de laatste eis. Maar dit lijkt me minder problematisch. Daar heb ik al eerder mee te maken gehad. Ik wil het eerst werkend krijgen in firefox!
hieronder de code.. zoals je ziet ook container geprobeerd. Verder alles al gehad.. min-height, height.. auto.. combinaties etc. Begrijp er niks meer van!
hmm.. 100% min-height lijkt op de server opgelost te zijn (ontdekt tijdens het schrijven van deze topic) maar als het ding offline staat wil het niet. Ligt dat aan mijn doctype? Uiteindelijk moet ik een nieuwsbrief maken en die zijn offline.. iemand een offline oplossing voor min-height: 100% ?
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<style type="text/css">
html,body
{
height: 100%;
width: 600px;
}
#container
{
background-color: #000;
position: relative;
min-height: 100%;
height: auto !important; /* voor moderne browsers */
height: 100%; /* voor IE */
}
#header
{
height: 50px;
width: 600px;
background-color: red;
color: #FFF;
}
#left_colum
{
min-height: 100%;
width: 70px;
background-color: #BBBBFF;
float: left;
}
#middle
{
min-height: 100%;
width: 460px;
background-color: #BBFFBB;
float: left;
}
#right_colum
{
min-height: 100%;
width: 70px;
background-color: #FFBBBB;
float: left;
}
</style>
</head>
<body>
<!-- <div id="container"> -->
<div id="header">
<h1>nieuwsbrief</h1>
</div>
<div id="left_colum">
foo
</div>
<div id="middle">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed scelerisque elit in ipsum. Cras risus tellus, dictum a, posuere malesuada, pharetra vitae, elit. Aliquam erat volutpat. Phasellus iaculis, ante gravida euismod fringilla, neque erat sollicitudin velit, et fringilla lorem ligula at nibh. Donec pede nisl, consectetuer non, ultrices et, venenatis sit amet, velit. Donec tincidunt massa fermentum elit accumsan luctus. Morbi leo. Proin accumsan. Pellentesque dui ligula, molestie at, molestie vitae, luctus vestibulum, ligula. Aliquam vehicula lacus quis velit.
</p><p>Sed faucibus diam eget nunc. Vivamus lacus diam, tempor eget, blandit eget, adipiscing in, risus. Maecenas erat. Phasellus leo erat, rutrum in, eleifend at, elementum sit amet, lorem. Donec in turpis. Suspendisse justo. Proin a tellus at nibh condimentum imperdiet. Nunc sit amet augue. Aenean nonummy. Nulla condimentum sollicitudin lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce nunc sem, pulvinar quis, malesuada at, semper sit amet, ipsum. Aliquam ac risus eu leo egestas aliquam. Donec quam risus, porttitor a, scelerisque at, elementum molestie, lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
<div id="right_colum">
bar
</div>
<!-- </div> -->
</body>
</html> |
De lelijke doorgestreepte verhalen heb ik er in gelaten voor degene die niet weten wat ik bedoel met het "100-min-height-probleem"
alvast bedankt!
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
