HTML Height 100% ze scrollem.

0

Ustawiłem height: 100% dla HTML + Body tak, żeby stworzyć dwa divy które będą mi dzielić screena w jakiejś proporcji a dla małych ekranów - symulować slide z prawej do lewej po otwarciu. Jednakże teraz mam problem taki, że w takiej sytuacji w przypadku gdy content nie mieści się w przeglądarce (height jest większy od 100%, gdy VH jest wystarczająco mały) to dla width > 960 (w media mam ustawione 960), buttony wychodzą poza diva wychodząc na HTML (białe tło), gdy width < 960, overflow znika. Jak to naprawić? Jak dobrze pisać CSSy mając na uwagę height/width/min-height/min-width itd. Link do projektu, z komponentem w którym leży problem:
https://github.com/KamLar/English-learning-frontend/blob/dev/src/app/modules/login/login-page/login-page-right-content/login-page-right-content.component.html

2

overflow:scroll;
overflow:auto;
?

0

Prawie działa. Dodałem overflow: inherit na form oraz overflow: auto na parenta form - jednak teraz to co poniżej jest scrollowalne, to co powyżej - nie (np header z "Logowanie"). Największy problem jaki widzę jest taki, że nie jestem pewny czy dobrze strukturyzuję HTML i CSS co skutkuje tym, że naprawa może być tylko tymczasowa. Na HTML jak dodałem overflow: auto czy scroll - nie zadziałało.

Edit: wiem, że mogę dodawać overflow: inherit na każdym z divów będącym parentem miejsca gdzie występuje ovefrlow oraz overflow: auto na HTML ale raczej nie tędy droga.

0

Naprawiłem to dodając do form jeszcze height:100% - wcześniej było tylko min-height: 100%, teraz jest min-height: 100%; height: 100%;.
I teraz moje pytanie: skoro min-height nie pozwala elementowi być mniejszym niż podana wartość - i jeżeli została ona ustawiona na 100%, to czemu dopiero to zaczęło działać kiedy dodałem jeszcze height:100%?
W przypadku gdy oba są oddzielnie - nie działa to tak jak powinno.

0

Pokaż kod, bez tego trudno zgadywać.

0

A nie masz tego gdzieś on-line albo chociaż ze skompilowanym już css?

0

Wystawione na Heroku:
https://learn-it-easier.herokuapp.com/
Zadziała to, gdy wyłączę z form w klasie login-form align-items:center - jednakże chciałbym żeby to tam było żeby wyśrodkować cały formularz. W wypadku gdy jest zostawiony align-items:center przy zmniejszaniu wysokości okna - header wychodzi poza scrolla. Dodatkowo, sytuacja tak jak wcześniej wspomniałem z height i min-height.

0

Bogowie, a po grzyba ci tam 5 poziomów zagnieżdżenia różnych elementów? Nie dziwota, że idzie się w tym pogubić, co się ile przewija i jaką ma wysokość, jak musisz jednocześnie zachowanie kilku różnych potomków kontrolować.

Przecież taka struktura jak na obrazku jest do realizacji dosłownie dwoma divami:

<body>
  <div class="lewy">abc</div>
  <div class="prawy">abc</div>
</body>

U mnie w Firefoksie

.login-form[_ngcontent-pfx-c29]{
  min-height:100%; przy 

działa poprawnie.

0

Pierwszy poziom: app-root wynika z tego, że to będzie strona startowa (docelowo w celach nauki mam zamiar dodać do tego PWA) - więc potrzebuję tego, żeby Angular mógł mi renderować komponenty na najwyższym poziomie (planuję, że aplikacja po zalogowaniu będzie miała inny layout)
Drugi poziom: app-login-page to będą właśnie te podmieniane komponenty.
Trzeci poziom: div rzeczywiście mógłbym się go pozbyć i dodać te klasy do app-login-page
Czwarty poziom:app-login-page-right-content - postanowiłem wyodrębnić form do osobnego komponentu żeby template w Angularze nie miały kilkaset linii (lewą część planuję zrobić tak samo)
Piąty poziom: form sam w sobie musi być.
A potem już jest wrapper służący do wyśrodkowania contentu wewnątrz app-login-page-right-content. Zapomniałem powiedzieć, że na Google Chrome są te problemy - zdaję sobie sprawę, że to może być związane z silnikiem (miałem kilka problemów na Chrome które na Firefox nie występowały, np. z stcky). Dalej zastanawiam się czemu align-items: center psuje efekt scrollingu + to zachowanie z min-height i height jest trochę dziwne.

Edit: Dodatkowo - dwóch poziomów mógłbym się bezproblemowo pozbyć, gdyby to nie był Angular tylko React :D A tak to angular wprowadza np. nadmiarowe zagnieżdżenia jeśli chce się wykorzystać routing czy wyodrębnić template do osobnych komponentów.

0

Powiem tak: w moim odczuciu progresywni webmasterzy sami stwarzają sobie problemy, które nie występują na klasycznych stronach www.
Jak się używa jakiegoś narzędzia/biblioteki itp. to ono chyba powinno ułatwiać nam życie zamiast je utrudniać?

Różne przeglądarki mają różny zakres obsługi nowszych właściwości css, niekiedy potrzebne jest używanie prefiksów, patrz:
http://drakonica.pl/dokumenty/flexbox_zestawienie.htm#niestandardowe
https://caniuse.com/

Dalej zastanawiam się czemu align-items: center psuje efekt scrollingu + to zachowanie z min-height i height jest trochę dziwne.

align-items centruje ci tutaj elementy w pionie. Bez niego formularz też wyłazi poza skrolowany obszar, tyle tylko, że po wycentrowaniu treść jest niżej, więc efekt szybciej się ujawnia.

0

Bez niego formularz też wyłazi poza skrolowany obszar, tyle tylko, że po wycentrowaniu treść jest niżej, więc efekt szybciej się ujawnia.

No właśnie niedokońca. Wychodzi - pojawia się scroll, ale gdy ustawiony jest align-items:center część renderowana jest ponad obszarem (zakładam że tak jakby element miał ujemny Y). Gdy wyłączę align-items:center to nagle się okazuje że Y zawsze jest dodatni i wszystko można zobaczyć scrollując. Prefiksy raczej nie będą problemem, bo z tego co wiem preprocesory scss załatwiają sprawę prefiksów. Więc według mnie jest to dziwne zachowanie. Dodanie overflow: inherit aż do app-login-page-right-content a w tym overflow: auto też nie działa.

Zdaję sobie też sprawę, że normalnie powinno się dobierać technologie do problemów tylko najpierw tych technologii trzeba się nauczyć żeby móc je odpowiednio dobierać, druga sprawa - w pracy korzystam z Angulara (którego wydaje mi się, że po roku korzystania z niego w miarę ogarniam) - największą moją bolączką są Cssy, których chcę się jak najszybciej nauczyć (bo tylko one trzymają mnie w obecnej pracy). Zastanawiam się też czy jest sens brnąć w Angulara, czy przesiąść się na Reacta.

Edit: Mam odpowiedź: https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container .

1 użytkowników online, w tym zalogowanych: 0, gości: 1