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

Problem ze stopką.

VPS Starter Arubacloud
+1 głos
689 wizyt
pytanie zadane 11 czerwca 2015 w HTML i CSS przez lukaszgo3 Początkujący (440 p.)
Mój pierwszy post więc na początku witam wszystkich ;)

Mam mały problem z footerem; bardzo ładnie trzyma sie dolnej strony do momentu aż tresc strony okaze sie niewystarczajaca aby mozna bylo zjechac nizej, tym samym stopka pojawia sie zaraz pod ostatnim obiektem, nawet jezeli ten jest na srodku, tym samym stopke nagle widzimy na srodku strony.

Jakies sugestie? ;)

5 odpowiedzi

+2 głosów
odpowiedź 11 czerwca 2015 przez Comandeer Guru (604,400 p.)

http://www.forumweb.pl/html/stopka-na-samym-dole-strony/201284#201284 → jak dotąd nigdy mnie sposób Roberto nie zawiódł ;)

komentarz 15 grudnia 2015 przez Zine Obywatel (1,000 p.)
Dwa tygodnie męczę się ze stopką, flex box działał, choć powodował zwężenie wrapu, więc nie mogłem z niego korzystać. Szukałem w googlu, szukałem po forach... Czemu ten post z 2007 roku nie był wcześniej dla mnie osiągalny? Nie wiem, ale działa bajecznie. Bardzo Ci dziękuję za podlinkowanie tego! :)
0 głosów
odpowiedź 11 czerwca 2015 przez SebastianGomularz Dyskutant (9,370 p.)
Pokaż kod tak trudno jest wywnioskować co jest złe
0 głosów
odpowiedź 11 czerwca 2015 przez Adrian1999 Nałogowiec (34,570 p.)
Dawno w webdeveloperce się nie bawiłem, ale zdaje mi się że https://developer.mozilla.org/en-US/docs/Web/CSS/max-height powinno dać radę, kiedyś też taki problem miałem. Edit // Dla treści
0 głosów
odpowiedź 11 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
/*---------------------------------
:: STOPKA
---------------------------------*/
#footer {
    text-align: center;
	color: #f5f5f5;
	border-top: 1px solid #1f1f1f;
	background: #303030;
	height: 110px;
	width: 100%;
	text-shadow: 1px 1px 0px #4a4a4a;
	font-size: 13px;
	box-shadow: inset 0px 10px 20px rgba(0,0,0,0.2);
}
#footer a { color: #f5f5f5; }
#footer .furniture {
	width: 700px;
	margin: 0 auto;
	padding-top: 10px;
}
#footer .links {
	text-transform: uppercase;
	font-weight: bold;
}
#footer .links a {
	color: #f5f5f5; 
	text-decoration: none; 
	margin: 0px 0px 0px 0px;
 }
 #footer .links a:hover {
	text-decoration: none; 
	border-bottom: 2px solid #f5f5f5;
 }
 #footer .links img {
	position: relative;
	margin: 0px 5px -2px 5px;
 }
 #footer .copyrights {
	display: block;
	margin-top: 12px;
	font-size: 12px;
 }
#right_info {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    color: #ffffff;
 }

 

komentarz 11 czerwca 2015 przez Comandeer Guru (604,400 p.)

Pokaż CAŁY kod HTML i CSS, najlepiej w formie demo na jsfiddle.net - będzie łatwiej ogarnąć i poprawić.

komentarz 12 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
komentarz 12 czerwca 2015 przez Comandeer Guru (604,400 p.)

http://jsfiddle.net/Comandeer/Lctvsh6L/

Stopce dodałem position: absolute a dla html, body ustawiłem height: 100%, natomiast później już dla samego body min-height: 100% i position: relative. Tym sposobem nawet przy pustej stronie stopka jest na dole

komentarz 12 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
Stopka co prawda jest widoczna caly czas an dole przegladarki, ale przy scrolowaniu w dol przesuwa sie na srodek ekranu i zachowuje sie wtedy jakby byla fixed, do tego ucieka na prawo i ucina z lewej ;(
komentarz 12 czerwca 2015 przez Comandeer Guru (604,400 p.)
Coś jest nie tak raczej w reszcie kodu w takim razie…
komentarz 12 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
Jutro zacznę szukać to może coś znajdę,  co prawda nie wiem gdzie zacząć,  ale od czegoś trzeba :)

W każdym razie dzięki wielkie za odpowiedzi,  może dzięki temu coś mi zaświta.
0 głosów
odpowiedź 11 czerwca 2015 przez Geek Pasjonat (19,660 p.)
html,
body {
	margin:0;
	padding:0;
	height:100%;
}

.content {
	padding-bottom:50px;
}
 
footer {
	height: 50px;
	position:absolute;
	bottom:0;
	left:0;
}

.content to klasa kontenera nad footerem.

Jego padding-bottom jest równy wysokości footera :)

komentarz 11 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)

Jak dodaje height: 100%; do

* {padding: 0; margin: 0; }

 

To rozwala sie cała strona, reszta krokow bez zarzutów.

komentarz 11 czerwca 2015 przez Comandeer Guru (604,400 p.)
Ta metoda nie działa jeśli strona jest dłuższa niż jeden ekran. W takim wypadku należy zastosować metodę Roberto, którą podlinkowałem.
komentarz 11 czerwca 2015 przez Comandeer Guru (604,400 p.)

@lukaszgo3 bo masz to wstawić dla html, body a nie dla wszystkich elementów na stronie.

komentarz 11 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)

Tak wygląda początek CSS'a

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,latin-ext);
* {padding: 0; margin: 0; }
body {
	background-color: #eee;
	background-image: url('img/1_body.jpg');
	background-position: top, 100px;
	background-repeat: repeat;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
    margin-top: 60px;
    min-height: 100%;
    position: relative;
}
a  {color: #e7e7e6;text-decoration: none;}
a:hover{color: #23678a; text-decoration: underline;}
img { border: 0; }
#wrapper { 
	margin:  auto;
	width: 1350px;
	margin-bottom: 0px;
}

Jak widać nie ma tam nawet HTML ;(

komentarz 11 czerwca 2015 przez Comandeer Guru (604,400 p.)

Ermm… To dlaczego po prostu nie dopiszesz na początku regułki dla html, body?

komentarz 11 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,latin-ext);
html
{padding: 0; margin: 0; height: 100%; }
body {
	background-color: #eee;
	background-image: url('img/1_body.jpg');
	background-position: top, 100px;
	background-repeat: repeat;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
    margin-top: 60px;
    min-height: 100%;
    position: relative;

Aktualnie wygląda to tak. Niestety stopka nie zmienila polozenia.

Podobne pytania

+1 głos
5 odpowiedzi 409 wizyt
pytanie zadane 6 grudnia 2015 w HTML i CSS przez Zine Obywatel (1,000 p.)
0 głosów
0 odpowiedzi 299 wizyt
pytanie zadane 27 lutego 2019 w HTML i CSS przez zerakot Obywatel (1,870 p.)
0 głosów
2 odpowiedzi 969 wizyt
pytanie zadane 5 czerwca 2018 w HTML i CSS przez Virtual Nowicjusz (120 p.)

92,845 zapytań

141,786 odpowiedzi

320,861 komentarzy

62,178 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.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...