Mam stronę zawierającą tylko kilka linii treści. Chcę, aby stopka została wypchnięta na dno.Wymuszenie stopki u dołu strony o małej zawartości
<div id="footer"></div>
Nie chcę używać
#footer
{
position:fixed;
bottom:0;
}
AKA Sticky stopka
Czy jest to możliwe bez jQuery?
jakieś sugestie?
Istnieje inny Sticky Footer, który nie używa pozycji ustalonej;
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
To jest niesamowity czysty CSS rozwiązanie. Stopka pozostaje poniżej zawartości, jeśli jej wysokość przekracza wartość okna przeglądarki, ale pozostaje na dole okna przeglądarki, jeśli jest jej mniej. – Deborah
Moim zdaniem jest to najlepsze rozwiązanie sticky footer ... –
idealne! Myślę, że to nie będzie działać na IE8, ponieważ używa ujemnego marginesu. – pom4ik
Spróbuj Sticky stopki rozwiązanie Steve Hatcher
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {
margin: 0;
padding: 0;
}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to the total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow: auto;
padding-bottom: 180px;
}
/* must be same height as the footer */
#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
}
/*Opera Fix*/
body:before {
/* thanks to Maleika (Kohoutec)*/
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
*/
Link jest zepsuty. –
Unikaj tego linku. Wprowadziłem zmianę do sprawdzenia. W dniu 11/2017 nastąpiło przekierowanie do stron oszustw podających, że komputer ma wirusa itp. –
Oto rozwiązanie, które nie wymaga, aby stopka być umieszczone na zewnątrz głównego elementu otoki, który jest jak większość ludzi struktury ich strony.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding-bottom: 1em; /* Height of footer */
min-height: 100%;
}
header {
background-color: #cff;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: #000;
}<div class="wrapper">
<header>I am the header.</header>
<article>I am content that doesn't fill the page. The footer will appear at the bottom of the browser window. However, when I do fill the page, you will need to scroll down to see the footer.</article>
<footer>I am the footer.</footer>
</div>Objaśnienie
Element owijka wypełni 100% wysokości widoku. (Możesz także użyć 100vh dla opakowania, jeśli nie chcesz ustawiać wysokości html i elementów body.) Opakowanie ma również dolny margines, aby utworzyć element zastępczy stopki do siedzenia.
Stopka jest bezwzględnie umieszczona na dole owijki i znajduje się w symbolu zastępczym utworzonym przez dolną wyściółkę owijki.
Oznacza to, że jeśli strona nie ma pasków przewijania, stopka zostanie umieszczona na samym dole. Jeśli jednak zawartość pasków przewijania jest wystarczająca, stopka zostanie przesunięta poniżej zawartości.
Zobacz moją odpowiedź tutaj: https://stackoverflow.com/questions/15960290/css-footer-not-displaying-at-the-bottom-of-the-page/48286159#48286159 – CodyBugstein