de bekende layout. Een top en een bottom panel welke beiden vast staan.
Hiertussen een panel, welke indien nodig gescrolled moet kunnen worden.
Onderstaande code werkt perfect, zolang bij #content geen width aangegeven wordt.
Zodra ik hier een width aangeef, dan gaat deze in IE 6 fout. De div content valt dan onder de #bottom.
Hoe kan dit opgelost worden? (overigens in firefox werkt het wel)
Als ik op F11 druk in IE, en hierna nog eens, dan staat het ineens wel goed zoals het bedoeld is.
kijk op http://vno.webaddict.nl/test.htm wat ik bedoel.
Hiertussen een panel, welke indien nodig gescrolled moet kunnen worden.
Onderstaande code werkt perfect, zolang bij #content geen width aangegeven wordt.
Zodra ik hier een width aangeef, dan gaat deze in IE 6 fout. De div content valt dan onder de #bottom.
Hoe kan dit opgelost worden? (overigens in firefox werkt het wel)
Als ik op F11 druk in IE, en hierna nog eens, dan staat het ineens wel goed zoals het bedoeld is.
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
| <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#container {
height: 100%;
padding-top: 85px;
padding-bottom: 35px;
-moz-box-sizing: border-box;
}
#top {
position: absolute;
top:0px;
left:0px;
height: 85px;
width: 100%;
background-color: #0000FF;
}
#content {
position: relative;
height: 100%;
width:50%;
overflow: auto;
background-color: #00FF00;
}
#bottom {
position: absolute;
bottom:0px;
left:0px;
height: 35px;
width: 100%;
background-color:#0000FF;
}
</style>
<body>
<div id="container">
<div id="top">top</div>
<div id="content">
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>
<div id="bottom">bottom</div>
</div>
</body>
</html> |
kijk op http://vno.webaddict.nl/test.htm wat ik bedoel.
[ Voor 20% gewijzigd door Verwijderd op 05-04-2005 19:39 ]

