1. Dom
  2. Pytanie i odpowiedź
  3. Znacznik HTML 5 stopki zawsze jest na dole.

Znacznik HTML 5 stopki zawsze jest na dole.

2010-11-11 12 views
19

Zajmuję się tworzeniem strony w HTML 5. Zawijam wszystkie moje stopki w stopce. Tak jak kod poniżej:Znacznik HTML 5 stopki zawsze jest na dole.

<!DOCTYPE html> 

<html> 
<head></head> 
<body> 
<header> 
<h1>Talking Dogs</h1> 
<b><p>Humans aren't the only talkers!</p></b> 
</header> 
<article> 
<p>Ever encountered a talking dog? I have.</p> 
<p>It all happened one day as I was walking down the street...</p> 
</article> 
<footer> 
© 2009 Woofer Dog Corporation 
</footer> 
</body> 
</html>

Powyższy kod nie jest jednak rzeczywistym kodem witryny, ponieważ nie mogę go udostępnić. Czy ktoś może zaproponować mi najlepszy sposób na to w HTML 5, aby działał na wszystkich głównych przeglądarkach, takich jak IE-6,7,8/Firefox/Safari/Crome/Opera

Źródło

2010-11-11 vaibought

Odpowiedz

36

tag stopka HTML5 za nie magicznie umieścić treść na dole strony - nadal trzeba projektować je tak samo jak zawsze. W związku z tym, że działa dokładnie tak samo jak <div>, więc należy traktować go jako taki, określając CSS aby wyświetlić zgodnie z przeznaczeniem:

footer { 
    //CSS code to make it display at the bottom, same as you would have done for a div. 
}

Stopki przymocowany do dolnej części strony są znane jako „Sticky stopki” . Więcej informacji na temat uzyskiwania efektu można znaleźć tutaj: http://www.cssstickyfooter.com/

Znacznik <footer> sam w sobie (wraz z wszystkimi innymi nowymi tagami HTML5) nie ma zastosowania do magii układu, ale do celów semantycznych; tzn. wyjaśnić komuś odczytanie kodu (lub, co bardziej prawdopodobne, bota), że dane w tagu są danymi stopki.

W zakresie wsparcia przeglądarki, wszystkie obecne przeglądarek pozwalają na określenie nowych znaczników HTML5 oprócz IE, ale na szczęście wszystkie wersje IE (nawet IE6) może być zmuszony, aby umożliwić jej poprzez włączenie HTML5Shiv hack na swojej stronie.

Nadzieję, że pomaga.

Źródło

2010-11-11 12:47:32 Spudley

+0

Wielkie dzięki Spudley. Ten link działał dla mnie. Teraz jestem szczęśliwy. Wyobrażałem sobie, że w rewolucji HTML może być jakieś fajne rozwiązanie dostarczone przez społeczność programistów HTML, ale wbrew moim oczekiwaniom nie zrobili tego. Ale twój link jest dla mnie bardzo pomocny. Dziękuję – vaibought

+1

Po kilku eksperymentach odkryłem, że jeśli chodzi o używanie rozwiązania cssstickyfooter.com w połączeniu z hackowaniem HTML5Shiv, istnieje jeden mały problem ze wskazówkami. W przypadku Sticky Footer informują o dodaniu do nagłówka następujących elementów: " nlinus

0

Robisz to dokładnie w taki sam sposób zrób to w HTML4.01.

Źródło

2010-11-11 12:13:27 Rob

+0

Zrobiłem to, ale nie znalazłem żadnego wystarczającego postu, który działałby w moim przypadku. czy możesz zaproponować mi jakiś fajny post – vaibought

4

To powinno cię gdzie szukasz, aby przejść: (edytowane aby dodać dodatkowy wiersz tak, że kod markup pokaże dobry)

podstawowa HTML:

<footer> 
    <div class="colwrapper"> 
     <div class="fltcol">col1</div> 
     <div class="fltcol">col1</div> 
     <div class="fltcol">col1</div> 
    </div> 
</footer>

Oto CSS:

html { 
    position: relative; 
    min-height: 100%; 
} 

body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 

footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
    background-color: #949494; 
    color: #ffffff; 
} 

.colwrapper{ 
    -moz-column-count:3; /* Firefox */ 
    -webkit-column-count:3; /* Safari and Chrome */ 
    column-count:3; 
} 

/* Specify a 40 pixels gap between the columns: */ 
-moz-column-gap:40px; /* Firefox */ 
-webkit-column-gap:40px; /* Safari and Chrome */ 
column-gap:40px; 

/* Specify the width, style and color of the rule between columns: */ 

-moz-column-rule:3px outset #ff00ff; /* Firefox */ 
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ 
column-rule:3px outset #ff00ff; 
}

Źródło

2013-11-15 18:28:56 socialmatchbox

0

Korzystanie pozycję absolutną dla <footer> prac, ale jeśli masz wystający treść jako głównym szerokość rośnie zobaczysz wątpliwości lub jako użyć sprawdzać, FO oter zaczyna wisieć na środku ekranu. Nie jest to idealne rozwiązanie, ale użycie stałego dna po prostu rozwiązuje problem.

Źródło

2016-03-23 17:08:43 Derya

Powiązane problemy

 Powiązane problemy