div naar onderste positie (indien mogelijk)
Ik wil dat mijn footer op de laagste plaats in mijn pagina staat.
Als de inhoud van de pagina erg klein is wil ik dat hij onderaan in het scherm staat, daarvoor had ik deze code:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#footer{
background-color: #F6F6F6;
width: 100%px;
height: 250px;
background-image: url('images/footer.png');
background-position: center bottom;
background-repeat: no-repeat;
bottom: 0;
position: absolute;
}
background-color: #F6F6F6;
width: 100%px;
height: 250px;
background-image: url('images/footer.png');
background-position: center bottom;
background-repeat: no-repeat;
bottom: 0;
position: absolute;
}
Dit werkt prima met een kleine inhoud van mijn pagina.
Maar laten we zeggen, ik heb zo veel tekst dat de inhoud niet meer op mijn scherm past, dan moet mijn footer naar beneden. (Dan moet hij dus onder de inhoud staan, en dus nog niet meteen te zien)
Dit wil ook nog wel lukken, maar het lukt me maar niet om deze twee te combineren.
Kan iemand me hiermee helpen?
(Ik hoop dat ik het duidelijk heb uitgelegd)
Gewijzigd op 01/07/2013 12:42:26 door Tom aan t Goor
Dit ligt een beetje aan de situatie of dit jou probleem oplost.
Of je zou even het hele script moeten posten :)
Gewijzigd op 01/07/2013 13:00:17 door Harm ten Napel
Ik zal hier mijn code posten (waarvan ik denk dat het van belang is).
index.php
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
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
<div id="content">
<div id="top">
</div>
<div id="middle">
<div id="titel">
<img src="images/icons/home.png" alt="Home">
<span class="titel">Home</span>
<br>
<span class="subTitel">Stukje tekst!</span>
</div>
<div id="dots">
</div>
Hoi
<?php
if(isset($_GET['t'])){
echo '<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi';
}
?>
</div>
<div id="bottom">
</div>
</div>
<div id="footer-bg">
<div id="footer">
</div>
</div>
<div id="top">
</div>
<div id="middle">
<div id="titel">
<img src="images/icons/home.png" alt="Home">
<span class="titel">Home</span>
<br>
<span class="subTitel">Stukje tekst!</span>
</div>
<div id="dots">
</div>
Hoi
<?php
if(isset($_GET['t'])){
echo '<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi';
}
?>
</div>
<div id="bottom">
</div>
</div>
<div id="footer-bg">
<div id="footer">
</div>
</div>
style.css
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
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
#footer-bg{
height:250px;
width:100%;
bottom: 0;
position: absolute;
background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
background-color: #F6F6F6;
width: 100%;
height: 250px;
background-image: url('images/footer.png');
background-position: center bottom;
background-repeat: no-repeat;
bottom: 0;
position: absolute;
}
#content{
width: 1000px;
min-height: 150px;
margin-left: auto;
margin-right: auto;
overflow: visible;
font-family: "Myriad", sans-serif;
}
#content #middle{
padding-left: 30px;
width: 943px;
background: url(images/content2/middle.png) repeat-y;
}
height:250px;
width:100%;
bottom: 0;
position: absolute;
background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
background-color: #F6F6F6;
width: 100%;
height: 250px;
background-image: url('images/footer.png');
background-position: center bottom;
background-repeat: no-repeat;
bottom: 0;
position: absolute;
}
#content{
width: 1000px;
min-height: 150px;
margin-left: auto;
margin-right: auto;
overflow: visible;
font-family: "Myriad", sans-serif;
}
#content #middle{
padding-left: 30px;
width: 943px;
background: url(images/content2/middle.png) repeat-y;
}
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
62
63
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
<style>
#footer-bg{
height:250px;
width:100%;
bottom: 0;
position: relative;
background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
background-color: #F6F6F6;
width: 100%;
height: 250px;
background-image: url('images/footer.png');
background-position: center bottom;
background-repeat: no-repeat;
}
#content{
width: 1000px;
min-height: 150px;
margin-left: auto;
margin-right: auto;
overflow: visible;
font-family: "Myriad", sans-serif;
}
#content #middle{
padding-left: 30px;
width: 943px;
background: url(images/content2/middle.png) repeat-y;
}
</style>
<div id="content">
<div id="top">
</div>
<div id="middle">
<div id="titel">
<img src="images/icons/home.png" alt="Home">
<span class="titel">Home</span>
<br>
<span class="subTitel">Stukje tekst!</span>
</div>
<div id="dots">
</div>
Hoi
<?php
if(isset($_GET['t'])){
echo '<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi';
}
?>
</div>
<div id="bottom">
</div>
</div>
<div id="footer-bg">
<div id="footer">
</div>
</div>
#footer-bg{
height:250px;
width:100%;
bottom: 0;
position: relative;
background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
background-color: #F6F6F6;
width: 100%;
height: 250px;
background-image: url('images/footer.png');
background-position: center bottom;
background-repeat: no-repeat;
}
#content{
width: 1000px;
min-height: 150px;
margin-left: auto;
margin-right: auto;
overflow: visible;
font-family: "Myriad", sans-serif;
}
#content #middle{
padding-left: 30px;
width: 943px;
background: url(images/content2/middle.png) repeat-y;
}
</style>
<div id="content">
<div id="top">
</div>
<div id="middle">
<div id="titel">
<img src="images/icons/home.png" alt="Home">
<span class="titel">Home</span>
<br>
<span class="subTitel">Stukje tekst!</span>
</div>
<div id="dots">
</div>
Hoi
<?php
if(isset($_GET['t'])){
echo '<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi';
}
?>
</div>
<div id="bottom">
</div>
</div>
<div id="footer-bg">
<div id="footer">
</div>
</div>
Gewijzigd op 01/07/2013 14:33:33 door Harm ten Napel
Bij veel tekst staat hij helemaal onderaan.
En bij weinig tekst staat hij halverwege mijn scherm.
Toevoeging op 01/07/2013 13:17:54:
ik heb het stukje code getest en bij mij blijft de footer onder aan staan :)
Als de content van mijn pagina bijv. 500px is, wil ik dat de footer onderaan staat, en dat de content en de footer tegelijk te zien zijn.
Maar als de content van mijn pagina bijv. 1500px is, wil ik dat de footer onder de content staat en dat je dus eerst naar beneden moet scrollen voor je de footer kan zien.
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
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
#footer-bg{
height:250px;
width:100%;
bottom: 0;
position: fixed;
background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
background-color: #F6F6F6;
width: 100%;
height: 250px;
background-image: url('images/footer.png');
background-position: center bottom;
background-repeat: no-repeat;
}
#content{
position: relative;
width: 1000px;
min-height: 150px;
margin-left: auto;
margin-right: auto;
overflow: auto;
font-family: "Myriad", sans-serif;
margin: 0 0 250px; /* bottom = footer height */
}
#content #middle{
padding-left: 30px;
width: 943px;
background: url(images/content2/middle.png) repeat-y;
}
height:250px;
width:100%;
bottom: 0;
position: fixed;
background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
background-color: #F6F6F6;
width: 100%;
height: 250px;
background-image: url('images/footer.png');
background-position: center bottom;
background-repeat: no-repeat;
}
#content{
position: relative;
width: 1000px;
min-height: 150px;
margin-left: auto;
margin-right: auto;
overflow: auto;
font-family: "Myriad", sans-serif;
margin: 0 0 250px; /* bottom = footer height */
}
#content #middle{
padding-left: 30px;
width: 943px;
background: url(images/content2/middle.png) repeat-y;
}
Gewijzigd op 01/07/2013 14:33:03 door Harm ten Napel
Ook dat werkt helaas niet :(
http://www.conijnwebdesign.nl/tutorials/fixed_footer,normal_scrollbar.html
Gewijzigd op 01/07/2013 14:32:21 door Harm ten Napel
Harm ten Napel op 01/07/2013 14:24:19:
volgens mij bedoel je zo iets :)
http://www.conijnwebdesign.nl/tutorials/fixed_footer,normal_scrollbar.html
http://www.conijnwebdesign.nl/tutorials/fixed_footer,normal_scrollbar.html
Dat bedoel ik niet precies.
Ik heb uiteindelijk een voorbeeld kunnen vinden, en hiermee is het ook gelukt.
http://jsfiddle.net/ELUGc/1/
Opgelost.
Gewijzigd op 01/07/2013 14:32:03 door Harm ten Napel