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

Problem z flex w CSS - zwęża stronę

Object Storage Arubacloud
+1 głos
382 wizyt
pytanie zadane 6 grudnia 2015 w HTML i CSS przez Zine Obywatel (1,000 p.)

Cześć,

Tworzę styl pod forum opartym na phpBB miałem problemy z przyklejeniem stopki na dole, a próbowałem na kilka sposobów. Używając w footerze:

    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;

Stopka przyklejała się miejscu gdzie kończy się okno przeglądarki i przy przewijaniu zostawała w jednym miejscu (nie jechała za przeglądarką), używając position: fixed ten sam efekt, tylko, że przewijała się wraz z przeglądarką. Sporo się naszukałem o przyklejaniu stopki i nic nie pomagało, aż trafiłem na FLEX. Mój działający kod wygląda tak:

body {
	font-family: Open sans, sans-serif;
	font-size: 10px;
	line-height: normal;
	margin: 0;
	word-wrap: break-word;
	-webkit-print-color-adjust: exact;
	display: flex;
    min-height: 100vh;
    flex-direction: column;
-webkit-flex-direction: column; /* Safari 6.1+ */
    -ms-flex-direction: column; /* IE 10 */ 
}
body {
	font-family: Open sans, sans-serif;
	font-size: 10px;
	line-height: normal;
	margin: 0;
	word-wrap: break-word;
	-webkit-print-color-adjust: exact;
	display: flex;
        min-height: 100vh;
        flex-direction: column;
        -webkit-flex-direction: column; /* Safari 6.1+ */
       -ms-flex-direction: column; /* IE 10 */ 
}

#wrap {
	border: 1px solid transparent;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
	flex: 1 0 auto;
	-webkit-flex: 1 0 auto; /* Safari 6.1+ */
       -ms-flex: 1 0 auto; /* IE 10 */ 
}

#page-body {
	margin: 4px 0;
	clear: both;
}

#page-footer {
	clear: both;
	width: 100%;
	background: #427599;
	bottom: 0;
}

 Stopka jest pięknie przyklejona natomiast pojawił się inny dziwny błąd. Wchodząc w widok tematów w danym forum WRAP się zwęża, wchodząc w niektóre tematy zwęża się jeszcze bardziej. Co dziwne w poniektórych tematach jest ok, a nie wiem od czego to zależy. Proszę o pomoc jeśli ktoś wie co może być pryzczyną 

5 odpowiedzi

+1 głos
odpowiedź 14 grudnia 2015 przez Schizohatter Nałogowiec (39,600 p.)
Okej, pomogę Ci.

Używając position: absolute, strona przyklejała Ci się do dolnej krawędzi okna, a nie strony, ponieważ nie wiesz, jak działa position: absolute. Ono ustawia element względem najbliższego rodzica z position innym niż domyślnym (static). Jeśli wszyscy rodzice mają static, to do okna przeglądarki.

Jeśli więc ustawisz dla html lub body position: relative, wtedy stopka będzie obierała top/left/bottom/right względem html/body, a nie względem okna przeglądarki, czyli będzie przyklejona na samym dole strony.

Nie zapomnij zaplusować, chcę zbierać fejm.
komentarz 15 grudnia 2015 przez Zine Obywatel (1,000 p.)

Niby rozumiem, a jednak nie działa to według mojego rozumowania. 

position: absolute; przykleja stopkę nie do przeglądarki, a w tym samym miejscu (jakby do przeglądarki), tylko zostaje tam na stałe nawet jak przesuwam stronę w dół to stopka na środku forów stoi. 

 position: relative - próbowałem dodać do body, html, wrap, page-body - niestety niezależnie od tego ciągle wygląa to tak samo źle. 

 

Dziękuję za zainteresowanie się tematem

komentarz 15 grudnia 2015 przez Zine Obywatel (1,000 p.)
W innym temacie znalazłem magiczny link z postem z 2007 r, który działa jak marzenie! :)

http://www.forumweb.pl/html/stopka-na-samym-dole-strony/201284?sid=44f57c798387b9cfa669c3753302bba0#201284

Plusik, za chęć pomocy, dzięki! Powodzenia w zbieraniu fejmu! :D
komentarz 15 grudnia 2015 przez Schizohatter Nałogowiec (39,600 p.)
No przecież zaproponowałem dokładnie to samo, co Roberto...
komentarz 16 grudnia 2015 przez Zine Obywatel (1,000 p.)
Widocznie trochę źle zrozumiałem :P I nic nie napisałeś o wysokościach :P
komentarz 16 grudnia 2015 przez Schizohatter Nałogowiec (39,600 p.)
Fakt, założyłem, że Twoja strona już zajmuje jakąś wysokość większą od okna przeglądarki.
0 głosów
odpowiedź 8 grudnia 2015 przez Zine Obywatel (1,000 p.)
Bardzo prosze o pomoc, jakoś nie mogę sobie z tym poradzić.
0 głosów
odpowiedź 9 grudnia 2015 przez Zine Obywatel (1,000 p.)
Może jednak ktoś wie co można zrobić, albo zna inny skuteczny sposób na przypięcie u dołu stopki?
0 głosów
odpowiedź 10 grudnia 2015 przez Zine Obywatel (1,000 p.)
Do 3 razy sztuka, ostatni raz odświeżam :D
0 głosów
odpowiedź 13 grudnia 2015 przez Zine Obywatel (1,000 p.)
Może ktoś, coś teraz pomoże? :D

Podobne pytania

0 głosów
2 odpowiedzi 584 wizyt
pytanie zadane 4 stycznia 2017 w HTML i CSS przez Latajace_kolano Nowicjusz (120 p.)
0 głosów
1 odpowiedź 196 wizyt
pytanie zadane 12 marca 2017 w HTML i CSS przez kon.bed21 Obywatel (1,610 p.)
0 głosów
1 odpowiedź 438 wizyt
pytanie zadane 8 grudnia 2016 w HTML i CSS przez kon.bed21 Obywatel (1,610 p.)

92,573 zapytań

141,423 odpowiedzi

319,648 komentarzy

61,959 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...