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

CSS rozciąganie diva i powielenie tła

VPS Starter Arubacloud
0 głosów
625 wizyt
pytanie zadane 6 lutego 2019 w HTML i CSS przez Krystian Strycharz Początkujący (260 p.)
edycja 6 lutego 2019 przez Krystian Strycharz

Witajcie, dopiero poznaję HTML i CSS i mam taki problem.
Załóżmy, że MENU pionowe jest divem, wewnątrz, którego znajdują się inne divy odpowiadające kolejnym opcjom w MENU. Chciałbym uzyskać taki efekt, gdzie ten główny div będzie rozciągał się w dół do momentu dotknięcia STOPKI, która będzie raz wyżej, a raz niżej w zależności od objętości CONTENTU.

Pierwszy problem to jak uzyskać taki efekt, jakie są sposoby, a drugi to w jaki sposób wypełnić powstałą przetrzeń (po rozciągnięciu się głównego diva MENU, tj. od najniżeszego diva z ostatniej opcji MENU do krawędzi głównego diva MENU) tłem, które musi zostać powtórzone X razy w pionie.

Oczywiście czytałem, próbowałem, ale bez właściwego efektu. Proszę o pomoc.

2 odpowiedzi

0 głosów
odpowiedź 6 lutego 2019 przez pablop76 VIP (123,060 p.)

Jeżeli używasz flexboxa to nie powinieneś mieć problemu. I taka uwaga menu powinno bylć listą.

komentarz 6 lutego 2019 przez Krystian Strycharz Początkujący (260 p.)
Z flexboxem jeszcze się nie zetknąłem, poczytam. A możesz wyjaśnić dlaczego menu powinno być listą?
komentarz 6 lutego 2019 przez pablop76 VIP (123,060 p.)
Może powinny to za dużo powiedziane, ale to lepsze rozwiązanie niż div. Ponieważ grupuje linki.
komentarz 10 lutego 2019 przez Krystian Strycharz Początkujący (260 p.)
Czy możesz podpowiedzieć z jakich funkcji powienienem skorzystać by rozciągnąć  główny blok menu do stopki, oczywiście nie ustalając jego wysokości na stałe.
0 głosów
odpowiedź 6 lutego 2019 przez PolYGlok Pasjonat (19,450 p.)
Główny div bym dał na sztywno np. Hight 85% a stopke na 15% albo stopke index-z: 1 i by menu wchodziło pod stopkę jak by się rozwijało.

Zaś drugiego problemu nie rozumię- objaśnij więcej.
komentarz 6 lutego 2019 przez Krystian Strycharz Początkujący (260 p.)
Tak jest to metoda, ale jeśli treści w contencie będzie jedynie kilka linijek to wolałbym, żeby stopka podciągnęła swoją pozycję do góry i dotknęła dolnej krawędzi menu i tak się stanie pod warunkiem, że nie ograniczymy jej poprzez height:15%.

Spójrz na obrazek, jeśli stopka będzie na różnej wysokości ekranu (w zależności od ilości contentu) to białe pole również będzie zmieniało swoją wysokość, a chcę to pole wypełnić poprzez odpowiednie background-image, którego używałem razem z background-repeat: repeat-y ale nie uzyskałem odpowiedniego efektu, nawet wtedy kiedy wysokość diva menu ustaliłem na sztywno - tak dla testów, pomijając problem rozciągania - i było to np. 500px, co było wartością większą niż od górnej krawędzi MENU do ostatniej opcji "LINKI".
komentarz 6 lutego 2019 przez PolYGlok Pasjonat (19,450 p.)
to daj background-image index-z: -1;
komentarz 10 lutego 2019 przez Krystian Strycharz Początkujący (260 p.)
Nadal nie rozciąga w pionie głównego bloku menu...

Podobne pytania

0 głosów
2 odpowiedzi 1,247 wizyt
pytanie zadane 5 czerwca 2018 w HTML i CSS przez yato_ Początkujący (350 p.)
0 głosów
0 odpowiedzi 2,382 wizyt
pytanie zadane 4 lipca 2019 w JavaScript przez Ebay_05 Początkujący (400 p.)
0 głosów
3 odpowiedzi 709 wizyt
pytanie zadane 21 kwietnia 2016 w HTML i CSS przez anhydryt Początkujący (290 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

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!

...