CSS Sticky Footer Margin

NIE chcę STAŁĄ stopkę, potrzebuję STICKY footer.CSS Sticky Footer Margin

Moja lepka stopka działała dobrze na początku, ale gdy zawartość jest na określonej wysokości, pomiędzy stopką a spodem strony znajduje się margines.

Spróbuj zmierzyć się z wysokością przeglądarki i wysokością div treści, a powinieneś zobaczyć, gdzie jest problem.

Pozostawia niezgrabny margines między stopką a spodem strony.

Z góry dziękuję.

CSS Kod:

html, body { 
    height:100%; 
    margin:0; 
} 
body { 
    color:#FFF; 
    font:16px Tahoma, sans-serif; 
    text-align:center; 
} 
a { 
    text-decoration:none; 
} 
#wrapper { 
    height:100%; 
    margin:0 auto; 
    min-height:100%; 
    padding-bottom:-30px; 
    width:985px; 
} 
#content { 
    background:#F00; 
    height:950px; 
} 
#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
} 
#footer span { 
    color:#FFF; 
    font-size:16px; 
    padding-right:10px; 
} 
#push { 
    clear:both; 
    height:30px; 
}

HTML kod:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Bad Footer</title> 
     <link rel="stylesheet" href="badfooter.css" type="text/css"> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="content"> 
      <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span> 
     </div> 
     <div id="push"></div> 
    </div> 
    <div id="footer"> 
     <a href=""><span>About Us</span></a> 
     <span> | </span> 
     <a href=""><span>Contact Us</span></a> 
     <span> | </span> 
     <a href=""><span>Home</span></a> 
    </div> 
</body>

Źródło

2012-08-08 Connor

Wystarczy dodać position: fixed; do klasy footer w css:

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: fixed; /*add this new property*/ 
}

----- UPDATE -----

Jeśli potrzebujesz stopkę, która pozostaje na dnie potrzebne są dwie rzeczy:

#wrapper { 
    /*height:100%;*/ /*you need to comment this height*/ 
    margin:0 auto; 
    min-height:100%; 
    padding-bottom:-30px; 
    width:985px; 
    position: relative; /*and you need to add this */ 
} 

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: relative; /*use relative position*/ 
}

#wrapper { 
 
    /*height:100%;*/ /*you need to comment this height*/ 
 
    margin: 0 auto; 
 
    min-height: 100%; 
 
    min-height: 700px; /* only for Demo purposes */ 
 
    padding-bottom: -30px; 
 
    width: 985px; 
 
    position: relative; /*and you need to add this */ 
 
} 
 
#footer { 
 
    background: #000; 
 
    border-top: 1px solid #00F0FF; 
 
    height: 30px; 
 
    margin-top: -30px; 
 
    padding: 5px 0; 
 
    width: 100%; 
 
    position: relative; /*use relative position*/ 
 
}

<div id="wrapper"> 
 
    <div id="content"> 
 
    <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span> 
 
    </div> 
 
    <div id="push"></div> 
 
</div> 
 
<div id="footer"> 
 
    <a href=""><span>About Us</span></a> 
 
    <span> | </span> 
 
    <a href=""><span>Contact Us</span></a> 
 
    <span> | </span> 
 
    <a href=""><span>Home</span></a> 
 
</div>

Źródło

2012-08-08 15:47:46 Luis

Ustawienie pozycji na stałe nie jest lepki stopka ... stałe oznacza, że będzie pozostań na dole przez cały czas (pomimo przewijania). Z drugiej strony lepkie stopki są znacznie bardziej skomplikowane. Jeśli jest przewijanie, będziesz musiał przewinąć spód, aby zobaczyć stopkę, w przeciwnym razie pozostaje na dole. – Connor

@Connor sprawdź aktualizację w odpowiedzi – Luis

To chyba wystarczyło! Wielkie dzięki. – Connor

Dodaj position: fixed do klasy stopki. Zauważ, że nie działa w niektórych starych wersjach Internet Explorera. http://jsfiddle.net/kAQyK/

#footer { 
    background:#000; 
    border-top:1px solid #00F0FF; 
    clear:both; 
    height:30px; 
    margin-top:-30px; 
    padding:5px 0; 
    width:100%; 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
}

Zobacz http://tagsoup.com/cookbook/css/fixed/ przykłady jak zrobić to również działa w IE

Źródło

2012-08-08 15:48:32 Samuel

SŁOWA KLUCZOWE: STICKY FOOTER. Ustawienie pozycji na stałe nie jest lepką stopką ... stała oznacza, że pozostanie na dole przez cały czas (pomimo przewijania). Z drugiej strony lepkie stopki są znacznie bardziej skomplikowane. Jeśli jest przewijanie, będziesz musiał przewinąć spód, aby zobaczyć stopkę, w przeciwnym razie pozostaje na dole. – Connor

miałem ten sam problem od wieków i nic nie wydawało się działać wtedy zdałem sobie sprawę, że spacje widziałam pod moim stopce był w rzeczywistości nie spacje, ale przelew z mojej stopki z białym tekstem na białym tle. Jedyne co musiałem zrobić to dodać:

overflow:hidden

do mojej stopki w mojej css.

Jeśli ktoś chce rozwiązanie, które pracowały dla mnie to jest taki sam jak http://getbootstrap.com/2.3.2/examples/sticky-footer.html ale z dodanym overflow: hidden

Źródło

2014-07-07 01:34:19 Dominic

WYŚWIETLACZ TABELA = NO NO JS i stała wysokość!

Działa w nowoczesnych przeglądarkach (IE 8 +) - testowałem go w kilku przeglądarkach i wszystko wyglądało dobrze.

Odkryłem to rozwiązanie, ponieważ potrzebowałem lepkiej stopki bez stałej wysokości i bez JS. Kod znajduje się poniżej.

Opis: Zasadniczo masz pojemnik div z 2 elementami podrzędnymi: otoką i stopką. Umieść wszystko, co potrzebne na stronie (poza stopką) w opakowaniu. Kontener ustawiony jest na display: table; Opakowanie ustawione jest na display: table-row; Jeśli ustawisz html, body i wrapper na height: 100%, stopka przyklei się do dolnej części.

Stopka jest również ustawiona na display: table;. Jest to konieczne, aby uzyskać margines elementów potomnych. Możesz także ustawić stopkę na display: table-row;. Nie pozwoli to ustawić stopki na margin-top. W tym przypadku musisz uzyskać kreatywność z większą ilością elementów zagnieżdżonych.

Rozwiązanie:https://jsfiddle.net/0pzy0Ld1/15/

A z większą zawartością:http://jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body, 
 
#container, 
 
#wrapper { 
 
    height: 100%; 
 
} 
 
#container, 
 
#wrapper, 
 
#footer { 
 
    width: 100%; 
 
} 
 
#container, 
 
#footer { 
 
    display: table; 
 
} 
 
#wrapper { 
 
    display: table-row; 
 
} 
 
/* THIS IS JUST DECORATIVE STYLING */ 
 

 
html { 
 
    font-family: sans-serif; 
 
} 
 
#header, 
 
#footer { 
 
    text-align: center; 
 
    background: black; 
 
    color: white; 
 
} 
 
#header { 
 
    padding: 1em; 
 
} 
 
#content { 
 
    background: orange; 
 
    padding: 1em; 
 
} 
 
#footer { 
 
    margin-top: 1em; /* only possible if footer has display: table !*/ 
 
}

<div id="container"> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 
     HEADER 
 
    </div> 
 
    <div id="content"> 
 
     CONTENT 
 
     <br> 
 
     <br>some more content 
 
     <br> 
 
     <br>even more content 
 
    </div> 
 
    </div> 
 
    <div id="footer"> 
 
    <p> 
 
     FOOTER 
 
    </p> 
 
    <br> 
 
    <br> 
 
    <p> 
 
     MORE FOOTER 
 
    </p> 
 
    </div> 
 
</div>

Źródło

2016-02-08 16:55:38

CSS Sticky Footer Margin

Odpowiedz

Powiązane problemy