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

div automatycznie rozciągający się przy zmianie przybliżenia strony

VPS Starter Arubacloud
+1 głos
578 wizyt
pytanie zadane 6 maja 2017 w HTML i CSS przez Jakub Sieczka Nowicjusz (150 p.)
Witam

Opiszę problem najlepiej jak mogę, ponieważ przeszukałem cały internet oraz kody źródłowe różnych stron i nadal nie mogę znaleźć rozwiązania. Problem, a w zasadzie pytanie jest takie: czy jest jakiś sposób żeby ustawić wysokość diva tak, aby przy zmianie wielkości strony (ctrl + scroll i wydaje mi się że na różnych rozdzielczościach też będzie ten problem) powiększał się automatycznie w pionie.
Przykład:
<div nagłówek>  height: 50px

<div menu> height: 30px

<div zawartość> height: *  (automatycznie)

<div stopka> height: 20px

próbowałem już metody height: auto; min-height: 100%; jednak możliwe jest że nie w tym miejscu co trzeba

Proszę o podpowiedź i ewentualne wyprowadzenie z błędu, gdyby jednak okazało się, że zmiana powiększenia strony nie wpływa na to ponieważ sam już nie potrafię racjonalnie myśleć. Z góry dziękuję.
komentarz 6 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

wydaje mi się że na różnych rozdzielczościach też będzie ten problem

Może zastosuj po prostu @media queries

2 odpowiedzi

0 głosów
odpowiedź 6 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Moja propozycja jest następująca: https://codepen.io/ChrissP92/pen/xdPwRq

Ustawiasz EventListener najpierw na zdarzenie przechwytujące wciśnięcie klawisza ctrl, następnie podpinasz listener na zdarzeniu wheel. Tam odczytujesz wartość wysokości elementu i (dla bezpieczeństwa lub wg uznania) sprawdzasz czy wartość ta jest powyżej minimalnej (ja dałem 30) i poniżej maksymalnej (u mnie 300). W zależności od tego jak zmienia się wartość dla deltaY z obiektu zdarzenia, regulujesz sobie wysokość elementu HTML.

P.S. Nie jestem pewien czy akurat wybór propertisa deltaY jest prawidłowy, ale w taki sposób skrypt działa.

komentarz 6 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)

Można spróbować skrócić kod, pozbywając się jednego EventListenera, jeśli będziemy również sprawdzać czy obiekt zdarzenia zawiera klucz ctrlKey ustawiony na true:

https://github.com/nwjs/nw.js/issues/1818#issuecomment-192211411

komentarz 6 maja 2017 przez Jakub Sieczka Nowicjusz (150 p.)
Trudne rzeczy jak na mnie ale myślę, że w porównaniu do moich dzisiejszych poszukiwań to już będzie tylko formalność. Dzięki wielkie za odpowiedź :)
komentarz 6 maja 2017 przez ScriptyChris Mędrzec (190,190 p.)
Jeśli czegoś nie rozumiesz, to pytaj śmiało :)
0 głosów
odpowiedź 12 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)

opcja 1

.element {
width:100%;
height:0;
padding: 0 0 100%;
display:block;
}

opcja 2

$('.element').css( { 
height:($('.element').width()), 
} );

 

Podobne pytania

0 głosów
1 odpowiedź 163 wizyt
0 głosów
1 odpowiedź 577 wizyt
pytanie zadane 10 listopada 2015 w HTML i CSS przez firefoxlin Początkujący (290 p.)
0 głosów
1 odpowiedź 130 wizyt
pytanie zadane 2 grudnia 2020 w HTML i CSS przez OFAL Początkujący (260 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!

...