CSS i rozciągnięcie diva

pytanie zadane 18 lutego 2016 w HTML i CSS przez mix091 Nowicjusz (210 p.)

Cześć,

Robię swoją pierwszą stronę (samodzielnie) i toczę straszliwą walkę z css'em. Mianowicie próbuję rozciągnąć diva "lewy-panel" czyli ten trzymający całe logo+menu do dołu ekranu(do stopki). Próbowałem to zrobić tak, że głównego diva wrapper chciałem rozciągnąć height: 100% i później divowi lewy-boczny ustawić min-height:100%. Niestety kompletnie nie chce to u mnie działać, chociaż (chyba) powinno ponieważ sugerowałem się jakimiś poradnikami z iternetów. Tutaj jest LINK do strony w sieci:http://rudykojot102.hekko24.pl/ a po dopisaniu /style.css będzie mój css.

Pomocy

4 odpowiedzi

odpowiedź 18 lutego 2016 przez niezalogowany
wybrane 18 lutego 2016 przez mix091

Najlepsza

Próbowałem to zrobić tak, że głównego diva wrapper chciałem rozciągnąć height: 100% i później divowi lewy-boczny ustawić min-height:100%.

Dobrze kombinujesz - wystarczy ze dodasz jeszcze do znacznika html height: 100% i zacznie działać. (Wszyscy przodkowie muszą mieć ustawioną wysokość)

Ewentualnie sposób drugi - w klasie .lewy-panel daj height: 100vh;

Pokaż 8 poprzednich komentarzy

komentarz 18 lutego 2016 przez radek024 Szeryf (77,160 p.)

Chodzi mi o całość ;) Zobacz na stronę, teraz wystarczy zmienić typ parametry min-height i voila, działa.

komentarz 18 lutego 2016 przez mix091 Nowicjusz (210 p.)

Oj przepraszam, faktycznie po zmianie na height: 100vh klasy lewy-panel wszystko działa :)

Dzięki bardzo za pomoc i wytłumaczenie gdzie zrobiłem błąd, jedna i druga metoda działa elegancko.

Pozdrawiam :)

komentarz 18 lutego 2016 przez radek024 Szeryf (77,160 p.)

Kwestia tego, że 100% wartości height nie oznacza 100% strony, a kawałek jakiegoś kodu. Typ vh to typ pracujący na wysokości strony.

komentarz 18 lutego 2016 przez radek024 Szeryf (77,160 p.)

Dobrze przedstawiono to tutaj:

komentarz 18 lutego 2016 przez niezalogowany

Z checią bym kontynuował, ale.. zdecydowanie potrzebuje snu. Tutaj chodzi o równa wysokość elementów z float? To chyba nie jest takie trywialne w css... Chociaż.. pewnie jutro przyjdzie Comandeer i wszystko tu pozamiata : )

odpowiedź 18 lutego 2016 przez radek024 Szeryf (77,160 p.)

Źle kombinujesz; a co jeśli lewy-panel to byłby blok równy blokowi wrapper? Wtedy lewy panel jest elementem niezależnym od wrappera, przez co łatwiej jest nim operować. Właściwie to mógłbym podać rozwiązanie w pełni, ale trzeba wymagać - w razie czego pytaj, postaram się pomóc.

komentarz 18 lutego 2016 przez mix091 Nowicjusz (210 p.)

Sorry, ale chyba nie zrozumiałem przekazu :(

komentarz 18 lutego 2016 przez radek024 Szeryf (77,160 p.)

Teraz każdy element jest równy blokowi o klasie wrapper. Jeżeli postawiłbyś panel-lewy poza nim, operacja nim będzie łatwiejsza aniżeli w klasie, która narzuca swoje, dodatkowe ograniczenia. Po tym należy zmienić tylko jednostkę i wszystko działa. Ale tak swoją stroną - kod nie jest w najlepszym stanie, ale o tym innym razem.

komentarz 18 lutego 2016 przez mix091 Nowicjusz (210 p.)

No dobrze, wyciagnalem lewy-panel przed wrappera i ustawiłem mu parametr min-height: 100%; i dalej nie za bardzo chce to działać.

komentarz 18 lutego 2016 przez radek024 Szeryf (77,160 p.)

Teraz zmień typ parametru na vh, wyżej podawany zresztą ;)

komentarz 18 lutego 2016 przez mix091 Nowicjusz (210 p.)

Dzięki za pomoc, już wszystko jasne. A że kod nie jest w najlepszym stanie to się domyślam, w sumie pierwszy raz robię cokolwiek samodzielnie w html i css, a jedyne gdzie miałem do czynienia z css'em to kurs Pana Mirosława na yt, czyli nie za wiele.

odpowiedź 18 lutego 2016 przez meteor Nowicjusz (220 p.)

Witam , to i ja 2 grosze dorzuce :))

Jak juz robisz pierwsza strone i do tego jestes poczatkujacym , prosze przyjzyj sie nowy tzechnologiom , poco tobie sie uczyc starych rzeczy ktore so uciazliwe , ciezkie i niewygodne :))))

Jezeli zobaczysz w przykladowym CSS-kodzie takie cudenko jak Float: cos tam cos tam ,to jest to niewarte twojego wysilku zeby to zrozumiec ,po prostu niewarto , float to przeklenstwo i rzecz niedobra :))))

Do rozwiazania twojego problemu przyjrzalbym sie Flexbox'owi i basta :))))

pzdr

meteor

komentarz 18 lutego 2016 przez mix091 Nowicjusz (210 p.)

Jako początkujący raczej ciężko odróżnić co jest starzejącą się technologią, której już nie warto używać od nowy, na których warto się skupić. Również sam zdołałem się zorientować, że z tym floatem to jest coś nie tak, ale jakoś nie szukałem niczego innego by myślałem że tak po prostu jest i musi być.

Pozdrawiam.

odpowiedź 18 lutego 2016 przez mix091 Nowicjusz (210 p.)
edycja 18 lutego 2016 przez mix091

A więc przerobiłem stronę tak aby była zrobiona w nowszej technologi flexboxowej. Problem mam taki, że te panele z temperaturami i wilgotnością ustawiają się pod sobą zamiast obok siebie. Co jest raczej dziwne bo defaultowo powinny się chyba ustawiać w wierszu jeżeli w divie content jest wystarczająco miejsca (a jest bo zajmuje przestrzeń do końca ekranu). Próbowałem użyć funkcji flex-direction:row, w classie item-panel, aby wyświetlić to wierszowo, ale niestety nic to nie daje. W czym leży problem? LINK do strony w sieci:http://rudykojot102.hekko24.pl/