Logowanie

Dynamiczny content nad position absolute

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ź

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 137 wizyt

Bootstrap - div z position absolute nie łapie się pod responsywność, da się to zmienić?

pytanie zadane 20 lipca 2019 w HTML i CSS przez szaman219 Nowicjusz (140 p.)

0 głosów

1 odpowiedź 297 wizyt

Wyśrodkowany div w poziomie - position absolute

pytanie zadane 22 czerwca 2017 w HTML i CSS przez hiper007 Stary wyjadacz (11,270 p.)

+1 głos

1 odpowiedź 211 wizyt

Display Table cell i position Absolute

pytanie zadane 3 maja 2017 w HTML i CSS przez Alex.Ironside Stary wyjadacz (14,900 p.)

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...

Dynamiczny content nad position absolute

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci