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

Question

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ę.

Comments

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

Może zastosuj po prostu @media queries? 

Answer 1

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.

Comments

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

---

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ź :)

---

Jeśli czegoś nie rozumiesz, to pytaj śmiało :)

Answer 2

opcja 1

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

opcja 2

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