CSS: przymocowany do dołu i wyśrodkowany

Chcę, aby moja stopka była przymocowana do dołu strony i wyśrodkowana. Zawartość stopki może się zmieniać w dowolnym momencie, więc nie mogę po prostu wyśrodkować jej przez margin-left: xxpx; margin-right: xxpx;

Problem w tym, że z jakiegoś powodu to nie działa:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

Przeszukałem sieć i nic nie znalazłem. Próbowałem zrobić kontener div i nada. Próbowałem innych kombinacji i gurnisht. Jak mogę to zrobić?

Dzięki

Powinieneś użyć lepkiej stopki, takiego jak to:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Są inni tacy jak ten;

* {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 total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

z html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

poprawiony kod Daniela Kanisa :

po prostu zmień następujące wiersze w CSS

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

oraz w html:

<p class="enclose problem">
Your footer text here.
</p>

Rozwiązanie jQuery

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

Czasami łatwiej jest zaimplementować JS niż zhakować stary CSS.

http://jsfiddle.net/gLhEZ/

Problem tkwi w position: static. Statyczne oznacza, że ​​w ogóle nie rób nic z pozycją. position: absolutejest tym, czego chcesz. Wyśrodkowanie elementu jest jednak nadal trudne. Powinno działać:

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

lub

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

Ale polecam pierwszą metodę. Użyłem technik centrowania z tej odpowiedzi: Jak wyśrodkować element pozycjonowany absolutnie w div?

Widzę 2 potencjalne problemy:

1 - IE miał problem z pozycją: naprawiona w przeszłości. Jeśli używasz IE7 + z prawidłowym typem dokumentu lub przeglądarką inną niż IE, nie stanowi to części problemu

2 - Musisz określić szerokość stopki, jeśli chcesz, aby obiekt stopki był wyśrodkowany. W przeciwnym razie domyślnie przyjmuje pełną szerokość strony, a automatyczny margines dla lewej i prawej strony zostanie ustawiony na 0. Jeśli chcesz, aby pasek stopki zajął szerokość (tak jak pasek powiadomień StackOverflow) i wyśrodkował tekst, potrzebujesz aby dodać „wyrównywanie tekstu: środek” do definicji.

Zakryłem 'problemowy element div w innym elemencie div' nazwijmy ten element div zamkniętym elementem div ... spraw, aby otaczany element div w css miał szerokość 100% i pozycję ustaloną na dole 0 ... następnie wstaw problemowy element div do załączony div tak by wyglądał

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

następnie w html ...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

Proszę bardzo!
- Hypertextie

Na podstawie komentarza @Michael:

Jest na to lepszy sposób. Po prostu utwórz treść z pozycją: względną i dopełnieniem wielkości stopki + odstępem między treścią a stopką, które chcesz. Następnie po prostu utwórz stopkę div z wartością bezwzględną i dolną: 0.

Poszedłem szukać wyjaśnienia i sprowadza się to do tego:

• Domyślnie bezwzględna pozycja dołu: 0px ustawia ją na dole okna, a nie na dole strony.
• Względne pozycjonowanie elementu powoduje zresetowanie zakresu jego bezwzględnej pozycji podrzędnej ... więc ustawiając treść na względne pozycjonowanie, bezwzględne położenie bottom: 0px teraz naprawdę odzwierciedla dolną część strony.

Więcej szczegółów na http://css-tricks.com/absolute-positioning-inside-relative-positioning/

oto przykład wykorzystujący siatkę css.

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

możesz użyć siatki css: konkretny przykład

Napotkałem problem, w którym typowy position: fixedi bottom: 0nie działał. Odkryłem zgrabną funkcjonalność dzięki position: sticky. Zauważ, że jest to „stosunkowo” nowe, więc nie będzie działać w IE / Edge 15 i wcześniejszych.

Oto przykład dla w3schools.

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 30px;
  font-size: 20px;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

</body>
</html>