• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dynamiczny content nad position absolute

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
128 wizyt
pytanie zadane 6 sierpnia 2019 w HTML i CSS przez Gambr Dyskutant (7,530 p.)

Jak uniknąć nachodzenia elementów wygenerowanych dynamicznie w JS na stopkę z position absolute? 

html,body{
  min-height: 600px;
  height: 100%;
  position: relative;
}
 
.absolute-bottom{
  position: absolute;
  bottom: 10px;
}

Nad stopką generowana jest lista elementów w JS. Jeśli jest ich za dużo, stopka (przycisk) przesłania któryś z elementów a lista rozwija się dalej. Docelowo chciałabym, aby stopka przesunela się na dół strony przy zmianie wysokości 

1 odpowiedź

0 głosów
odpowiedź 12 sierpnia 2019 przez Mati Gaduła (3,390 p.)

Możesz to osiągnąć nie pozycjonując stopki względem okna przy pomocy position: absolute; Żeby dynamicznie ją w dół przenosić trzeba by było sprawdzać kiedy content zawiera całą wysokość ekranu i usunąć właściwość position: absolute. Proponuje użyć innego sposobu.

Jeden ze sposobów jak to możesz osiągnąć jest flexbox. Tworzysz sobie layout strony(kontener), który ma własciwości:


  display: flex;
  flex-direction: column;
  justify-content: space-between

Tutaj masz przykład takiego użycia: https://codepen.io/Mati_/pen/QeZPGV

Struktura strony przy użyciu podanego wyżej sposobu.

<body>
   <div class="top">
   //cały content strony tutaj
    </div>
   <footer>stopka</footer>
</body>

 

Możesz również wybrać jedno z tych rozwiązań: https://css-tricks.com/couple-takes-sticky-footer/

Podobne pytania

0 głosów
0 odpowiedzi 144 wizyt
0 głosów
1 odpowiedź 310 wizyt
pytanie zadane 22 czerwca 2017 w HTML i CSS przez hiper007 Stary wyjadacz (11,270 p.)
+1 głos
1 odpowiedź 242 wizyt

93,103 zapytań

142,077 odpowiedzi

321,566 komentarzy

62,445 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...