container 100%
Ik zit alleen met een probleempje.
Ik heb mijn container op 100% staan maar zodra ik dan scroll zie ik dat die 100% de hoogte van mijn scherm is. Dus als ik scroll stopt de container.
Hoe kan ik de container altijd tot de onderkant laten lopen?
Iemand een idee?
Dus laat ie de container niet zien.
Toevoeging op 25/11/2011 21:46:13:
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
53
54
55
56
57
58
59
60
61
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
html, body
{
height: 100%;
width: 100%;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; color: #000;
background-color: #3B3B3B;
text-align: left;
margin: 0px;
padding: 0px;
}
div#container
{
width: 690px;
height: 100%;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-image: url("images/layout/header1.jpg");
background-repeat: no-repeat;
background-color: #61809E;
margin: 0 auto;
}
div#content
{
position: relative;
top: 160px;
margin: 0 auto;
width: 642px;
}
div#content_left
{
width: 420px;
float: left;
padding-right: 9px;
}
div#content_right
{
width: 213px;
float: left;
}
div#content_l
{
width: 404px;
background-color: #FFF;
padding: 4px 8px 8px 8px;
}
div#content_r
{
width: 199px;
background-color: #FFF;
padding: 4px 8px 8px 8px;
}
{
height: 100%;
width: 100%;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px; color: #000;
background-color: #3B3B3B;
text-align: left;
margin: 0px;
padding: 0px;
}
div#container
{
width: 690px;
height: 100%;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-image: url("images/layout/header1.jpg");
background-repeat: no-repeat;
background-color: #61809E;
margin: 0 auto;
}
div#content
{
position: relative;
top: 160px;
margin: 0 auto;
width: 642px;
}
div#content_left
{
width: 420px;
float: left;
padding-right: 9px;
}
div#content_right
{
width: 213px;
float: left;
}
div#content_l
{
width: 404px;
background-color: #FFF;
padding: 4px 8px 8px 8px;
}
div#content_r
{
width: 199px;
background-color: #FFF;
padding: 4px 8px 8px 8px;
}
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="screen" title="Default_style">
<link rel="shortcut icon" href="/images/layout/favicon.ico">
<title>Test</title>
</head>
<body>
<div id="container">
<div id="menu">
<ul id="ddtabs1" class="basictab">
<li><a href="index.php">Home</a></li>
</ul>
</div>
<div id="content">
<div id="content_left">
<h1>Laatste nieuws</h1>
<div id="content_l">
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
</div>
</div>
<div id="content_right">
<h1>Oud nieuws</h1>
<div id="content_r">
Test
</div>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="screen" title="Default_style">
<link rel="shortcut icon" href="/images/layout/favicon.ico">
<title>Test</title>
</head>
<body>
<div id="container">
<div id="menu">
<ul id="ddtabs1" class="basictab">
<li><a href="index.php">Home</a></li>
</ul>
</div>
<div id="content">
<div id="content_left">
<h1>Laatste nieuws</h1>
<div id="content_l">
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
</div>
</div>
<div id="content_right">
<h1>Oud nieuws</h1>
<div id="content_r">
Test
</div>
</div>
</div>
</div>
</body>
</html>
Gewijzigd op 26/11/2011 11:38:00 door Maikel B
Gewijzigd op 26/11/2011 08:13:27 door Jack Sierkstra
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#container:before /* Officiele syntax is met ::, maar dit accepteert IE nog niet */
{
content: '';
display: block;
clear: both;
}
{
content: '';
display: block;
clear: both;
}
Dit is hoe het eruit ziet als die floats er wel gewoon staan:
http://imageshack.us/photo/my-images/849/knipseli.jpg/
Toevoeging op 26/11/2011 22:29:33:
niemand meer een idee?