Footer onder Absolute DIV element

Overzicht

Sponsored by: Vacatures door Monsterboard

Peter Brok

Peter Brok

13/03/2021 23:00:11
Anchor link
Ik kom er niet uit. Ik wil een Footer hebben die onderaan de pagina komt te staan ongeacht de hoogte van het scherm en die naar beneden schuift als de hoogte van de content groter wordt. Ik heb de CSS hiervoor gevonden en het werkt als de div elementen van de content Relative zijn.

Maar maak ik de div-elementen van de content Absolute dan komt de Footer in het midden te staan.

Punt is dat al mijn div elementen Absolute moeten zijn. En ik wil hiervoor geen Bootstrap gebruiken.

Ik hoop dat iemand mij op weg kan helpen.

Een simpel voorbeeld hieronder,

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<style>
 .page-container {
  z-index: 1;
  position: relative;
  min-height: 100vh;
  background-color:silver;
  }

  .content-wrap {
  padding-bottom: 2.5rem;    
  }

  .footer_page {
  position: absolute;
  background-color:aqua;
  left:0px;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  }

  .p1 {
  position: absolute;
  top:10px;
  left:10px;
  width: 300px;
  height: 300px;            
  background-color:red;
  }

  .p2 {
  position: absolute;
  top:10px;
  left:10px;
  width: 300px;
  height: 300px;            
  background-color:blue;
  }
 
 .p3 {
  position: absolute;
  top:10px;
  left:10px;
  width: 300px;
  height: 300px;            
  background-color:green;
  }

  .p4 {
  position: absolute;
  top:10px;
  left:10px;
  width: 300px;
  height: 300px;            
  background-color:yellow;
  }

  .content {
  z-index: 3;
  position: relative;
  }

</style>

<body>

<div class="page-container">
   <div class="content-wrap">        
   <div class="content">        
   <div class="p1"></div>  
   <div class="p2"></div>            
   <div class="p3"></div>        
   <div class="p4"></div>        
  </div>
  
<div class="footer_page">    
      <!-- all other footer content -->
</div>  

</div>  
</div>
</body>
</html>
Gewijzigd op 13/03/2021 23:17:21 door Peter Brok
 
PHP hulp

PHP hulp

28/03/2024 14:42:58
 
- Ariën  -
Beheerder

- Ariën -

13/03/2021 23:03:52
Anchor link
Zou je de code tussen code-tags kunnen plaatsen? Dat kan via de editor.
Alvast bedankt!
Gewijzigd op 13/03/2021 23:10:10 door - Ariën -
 
Peter Brok

Peter Brok

13/03/2021 23:10:30
Anchor link
Ja, natuurlijk, even kijken waar de editor zit.
Gewijzigd op 13/03/2021 23:20:07 door Peter Brok
 
Frank Nietbelangrijk

Frank Nietbelangrijk

14/03/2021 10:08:40
Anchor link
>> Punt is dat al mijn div elementen Absolute moeten zijn. En ik wil hiervoor geen Bootstrap gebruiken.

Waarom ???

Je kunt toch gewoon in je layout een absolute div maken?
Kun je er een kort stukje (je layout) HTML bijvoegen?
 
Ad Fundum

Ad Fundum

14/03/2021 15:51:43
Anchor link
In je voorbeeld heb je de CSS class "page-container" met een minimale hoogte van 100vh.
Maar als je die van 'relative' naar 'absolute' zet, dan wordt de div 0x0 pixels groot, omdat je geen breedte hebt opgegeven.

Je kunt width:100%; gebruiken, maar ik zou eerder kiezen voor left:0;right:0; omdat het iets uitmaakt met marges.
Als je absolute posities wilt opgeven is het handig om zo vroeg mogelijk een keuze te maken in het CSS box model, met box-sizing:border-box; (of box-sizing:content-box;), zie ook https://developer.mozilla.org/nl/docs/Web/CSS/box-sizing
 
Peter Brok

Peter Brok

14/03/2021 20:51:31
Anchor link
Ad Fundum op 14/03/2021 15:51:43:
In je voorbeeld heb je de CSS class "page-container" met een minimale hoogte van 100vh.
Maar als je die van 'relative' naar 'absolute' zet, dan wordt de div 0x0 pixels groot, omdat je geen breedte hebt opgegeven.

Je kunt width:100%; gebruiken, maar ik zou eerder kiezen voor left:0;right:0; omdat het iets uitmaakt met marges.
Als je absolute posities wilt opgeven is het handig om zo vroeg mogelijk een keuze te maken in het CSS box model, met box-sizing:border-box; (of box-sizing:content-box;), zie ook https://developer.mozilla.org/nl/docs/Web/CSS/box-sizing




Toevoeging op 14/03/2021 20:59:15:

Onderstaande heb ik net weer geprobeerd. P1 tot P4 zijn relative. Je ziet dat netjes vier blokken onder elkaar verschijnen met daaronder de Footer. Als ik nu P1 tot P3 weghaal zodat er nog 1 blok overblijft staat de footer netjes onderin het scherm.

Maar maak ik nu P1 tot P4 absolute, dan staat de Footer ergens halverwege het scherm.

Ik heb left: 0 right:0 en width: 100% geprobeerd maar dat krijg ik niet werkend.



Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<html>
<body>

<style>
 .page-container {
  z-index: 1;
  position: relative;
  min-height: 100vh;
  background-color:silver;
  /*left:0;right:0*/
  }

  .content-wrap {
  padding-bottom: 2.5rem;    
  }

  .footer_page {
  position: absolute;
  background-color:aqua;
  left:0px;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  }

  .p1 {
  position: relative;
  top:10px;
  left:10px;
  width: 300px;
  height: 300px;            
  background-color:red;
  }

  .p2 {
  position: relative;
  top:10px;
  left:10px;
  width: 300px;
  height: 300px;            
  background-color:blue;
  }
 
 .p3 {
  position: relative;
  top:10px;
  left:10px;
  width: 300px;
  height: 300px;            
  background-color:green;
  }

  .p4 {
  position: relative;
  top:10px;
  left:10px;
  width: 300px;
  height: 300px;            
  background-color:yellow;
  }

  .content {
  z-index: 3;
  position: relative;
  }

</style>

<body>

<div class="page-container">
   <div class="content-wrap">        
   <div class="content">        
   <div class="p1"></div>  
   <div class="p2"></div>            
   <div class="p3"></div>        
   <div class="p4"></div>        
  </div>
  
<div class="footer_page">    
      <!-- all other footer content -->
</div>  

</div>  
</div>
</body>
</html>


Toevoeging op 14/03/2021 21:22:12:

Frank Nietbelangrijk op 14/03/2021 10:08:40:
>> Punt is dat al mijn div elementen Absolute moeten zijn. En ik wil hiervoor geen Bootstrap gebruiken.

Waarom ???

Je kunt toch gewoon in je layout een absolute div maken?
Kun je er een kort stukje (je layout) HTML bijvoegen?


Quote:
Kan je voorbeeld voor mij posten?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

14/03/2021 22:21:21
Anchor link
Ik krijg het enkel voor elkaar als ik een parent div maak die een minimale hoogte heeft. Het is verre van ideaal. Maar nogmaals mijn vraag: Waarom wil of moet je met absolute div's werken? Je suggereert dat Bootstrap dat ook doet maar dat is helemaal niet zo.

Met andere woorden: wat is je werkelijke probleem? Wat probeer je te bereiken?

Oh het linkje: https://codepen.io/frankbeen/pen/MWbxEXG
Gewijzigd op 14/03/2021 22:21:41 door Frank Nietbelangrijk
 
Peter Brok

Peter Brok

15/03/2021 00:14:08
Anchor link
Frank Nietbelangrijk op 14/03/2021 22:21:21:
Ik krijg het enkel voor elkaar als ik een parent div maak die een minimale hoogte heeft. Het is verre van ideaal. Maar nogmaals mijn vraag: Waarom wil of moet je met absolute div's werken? Je suggereert dat Bootstrap dat ook doet maar dat is helemaal niet zo.

Met andere woorden: wat is je werkelijke probleem? Wat probeer je te bereiken?

Oh het linkje: https://codepen.io/frankbeen/pen/MWbxEXG


Quote:

Ik heb het linkje geprobeerd, maar dat werkt helaas ook niet. Jammer genoeg is mijn probleem nog niet opgelost. :-(


Quote:
Hoi, het zal ongetwijfeld aan mijn programmeer capaciteiten liggen, dat meen ik ook nog, maar ik heb 18 div elementen die een foto, een link, een stuk tekst etc. bevatten.
Ik weet niet hoe ik dat netjes moet krijgen zonder het absoluut te stylen.
Foto aan de linkerkant, tekst boven in, daar onder een link.Dan is het de bedoeling dat de die div blokken overal neergzet kunnen worden, dus op elke plek op het scherm. Met Media zorg ik er dan voor dat het per schermafbeelding klopt. Eigenlijk is het hele project al zoals ik het wil, alleen die Footer nog....................





Toevoeging op 15/03/2021 00:16:12:

Peter Brok op 15/03/2021 00:14:08:
Frank Nietbelangrijk op 14/03/2021 22:21:21:
Ik krijg het enkel voor elkaar als ik een parent div maak die een minimale hoogte heeft. Het is verre van ideaal. Maar nogmaals mijn vraag: Waarom wil of moet je met absolute div's werken? Je suggereert dat Bootstrap dat ook doet maar dat is helemaal niet zo.

Met andere woorden: wat is je werkelijke probleem? Wat probeer je te bereiken?

Oh het linkje: https://codepen.io/frankbeen/pen/MWbxEXG


Quote:
Hoi, het zal ongetwijfeld aan mijn programmeer capaciteiten liggen, dat meen ik ook nog, maar ik heb 18 div elementen die een foto, een link, een stuk tekst etc. bevatten.
Ik weet niet hoe ik dat netjes moet krijgen zonder het absoluut te stylen.
Foto aan de linkerkant, tekst boven in, daar onder een link.Dan is het de bedoeling dat de die div blokken overal neergzet kunnen worden, dus op elke plek op het scherm. Met Media zorg ik er dan voor dat het per schermafbeelding klopt. Eigenlijk is het hele project al zoals ik het wil, alleen die Footer nog....................


Quote:
Ps, ik zie nu pas wat je gemaakt hebt via de link, ik ga daar morgen naar kijken, dank je wel.
Gewijzigd op 15/03/2021 15:17:28 door Peter Brok
 
Paul Ulje

Paul Ulje

16/03/2021 15:16:58
Anchor link
Hoi Peter, ik snap niet wat precies je wilt, maar als je een voettekst blijvend zichtbaar onder op je scherm gecentreerd wilt hebben is 'fixed' de aangewezen weg. Zo gebruik ik hem.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
#footer {
   position:fixed;
   bottom:0px;
   margin-left:auto;
   margin-right:auto;
   font-size:80%;
   z-index:1000;
   }
 
Peter Brok

Peter Brok

16/03/2021 21:25:34
Anchor link
Paul Ulje op 16/03/2021 15:16:58:
Hoi Peter, ik snap niet wat precies je wilt, maar als je een voettekst blijvend zichtbaar onder op je scherm gecentreerd wilt hebben is 'fixed' de aangewezen weg. Zo gebruik ik hem.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
#footer {
   position:fixed;
   bottom:0px;
   margin-left:auto;
   margin-right:auto;
   font-size:80%;
   z-index:1000;
   }




Quote:
Dat lijktt werken! Niet zoals ik eigenlijk wil, maar ik ga hier verder wel naar kijken.




Toevoeging op 16/03/2021 23:55:06:

Peter Brok op 16/03/2021 21:25:34:
Paul Ulje op 16/03/2021 15:16:58:
Hoi Peter, ik snap niet wat precies je wilt, maar als je een voettekst blijvend zichtbaar onder op je scherm gecentreerd wilt hebben is 'fixed' de aangewezen weg. Zo gebruik ik hem.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
#footer {
   position:fixed;
   bottom:0px;
   margin-left:auto;
   margin-right:auto;
   font-size:80%;
   z-index:1000;
   }




Quote:
Dat lijkt te werken! Niet zoals ik eigenlijk wil, maar ik ga hier verder wel naar kijken.


 
 

Dit topic is gesloten.



Overzicht

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.