viewport i stopka na dole strony..

pytanie zadane 8 sierpnia 2017 w HTML i CSS przez rice Początkujący (440 p.)

Witam

Tak jak w tytule czy da się jakoś przypiąć stopkę na dole strony używając atrybutu viewport ? Bo chciałbym przy pomocy css i "atrybutu / właściwości" @media dostosować trochę stronę pod urządzenia mobilne.. W wersji komputerowej stopka ładnie się przykleja do dołu strony i też ładnie się skaluje (od 800px do 1200px).. No ale stopka już przy użyciu atrybutu viewport i podglądzie w google chromie (akurat fajna opcje ma bo da się zobaczyć jak strona wyglądać może na wersji mobilnej) nie chce mi się tam kleić do dołu strony..

Może ktoś zna jakiś trik by to zmienić.
Dzięki wielkie z wszelkie informację.
Pozdrawiam,
Patryk

P.S.
Jest to mój pierwszy taki projekt że tak to ujmę na większą skalę. Do tej pory bawiłem się raczej w html i css. W dodatku pierwszy raz też mam styczność i próbuję to jakoś kompleksowo w miarę dostosować też od urządzeń mobilnych. Tak że dziękuję za cierpliwość i wyrozumiałość. Jeśli będzie potrzbny kod strony mogę tak owy udostępnić albo podać link do strony z moim projektem..

komentarz 8 sierpnia 2017 przez xmentor Nałogowiec (49,520 p.)

Jeśli będzie potrzbny kod strony mogę tak owy udostępnić albo podać link do strony z moim projektem..

Daj link.

1 odpowiedź

odpowiedź 8 sierpnia 2017 przez Assasz Nałogowiec (30,460 p.)

Ustaw minimalną wysokość strony np. w ten sposób:

body
{
      min-height: 100vh;
}

W ten sposób wysokość minimalna strony będzie się automatycznie ustawiać na 100% wysokości okna przeglądarki na danym urządzeniu, dzięki czemu stopka zawsze będzie "przyklejona" do dołu.

komentarz 8 sierpnia 2017 przez rice Początkujący (440 p.)

jeśli ustawię

body
{
      min-height: 100vh;
}

to stopka nie przykleja mi się do dołu strony..

moje wypociny: http://sloka.ml/mkse/test/2/

a jeśli zrobię to wedle własnej koncepcji stopka w wersji komputerowej oczywiście będzie na dole strony, ale już po dodaniu viewport nie: http://sloka.ml/mkse/test/2a/

komentarz 9 sierpnia 2017 przez Assasz Nałogowiec (30,460 p.)

Wybacz, nie body, tylko main w Twoim przypadku. Wartość oczywiście może być inna, 100vh to po prostu 100% wysokości okna przeglądarki.

komentarz 9 sierpnia 2017 przez rice Początkujący (440 p.)

może ja nadal robię coś źle ale ta stopka za nic nie chce się przykleić w wersji mobilnej do dołu storny.. a w wersji komputerowej hm.. wysokość strony robi się większa niż wysokość okna..

komentarz 9 sierpnia 2017 przez Assasz Nałogowiec (30,460 p.)

Robi się większa, bo przed main masz jeszcze header z daną wysokością, a za main footer z daną wysokością. Więc cała strona ma 100% z maina + header + footer.

Musisz tak to dostosować, aby razem dało 100% wysokości okna, wtedy automatycznie footer będzie stykał się z dolną krawędzią, o ile zawartość strony nie będzie większa.

Szczerze powiedziawszy nie wiem, czemu na wersji mobilnej nie działa, ale się dowiem :) Wygląda to tak, jakby podstawowa wysokość okna przeglądarki była większa niż wysokość urządzenia.

komentarz 9 sierpnia 2017 przez kamil29 Obywatel (1,230 p.)

ja mam podobny problem.Czy wystarczy dla każdej sekcji(header,main,footer ustawić

height:x vh) czy trzeba wszędzie dopisać min przed height?

komentarz 9 sierpnia 2017 przez rice Początkujący (440 p.)

@Assasz
znalazłem już błąd tyko nie wiem dla czego akurat to tak się robi.. Nigdzie nie mogę o tym znaleźć niczego.. przechodząc do właściwej części wypowiedzi.. Chodzi o to że nie może z viweport stosować mini-width / max-width lub width / max-width czy jakieś innej kombinacji bo wtedy strona się rozrzedza w podglądzie mobilnym i represywnym..

Chciałem żeby strona w wersji komputerowej sama się skalowała od 800px do 1200px dla tego podałem wymiar min / max-width, a dopiero na deser chciałem za pomocą media zrobić wygląd na inne urządzenia / rozdzielczości.. No ale wychodzi na to że muszę się bawić od samego początku już na mediach..

W sumie wiem już jaki błąd zrobiłem trzeba go teraz naprawić.. Lecz szkoda że w internecie ciężko znaleźć jakieś większe info na temat budowania responsoryjnych stron..

Tak przy okazji co oznacza "vh" ?

@kamil29
Jest kilkanaście jak nie kilkadziesiąt różnych sposobów ustawienia stopki na dole strony.. Ogólnie z tego co widziałem jest jedna zasada całą zawartość strony wsadzasz w jakiś pojemnik i jemu nadajesz właściwości do rozciągania się na całą wysokość. A dopiero za tym pojemnikiem robisz stopkę.. I ona zawsze będzie na dole strony.. Ale to tylko mówiąc ogólnie.. Jak chcesz to mogę Ci podesłać kilkadziesiąt sposobów na to, wybierzesz sobie łatwiejszy i ten który Ci odpowiada..