CSS: unten fixiert und zentriert

Ich muss meine Fußzeile am unteren Rand der Seite fixieren und zentrieren. Der Inhalt der Fußzeile kann sich jederzeit ändern, sodass ich ihn nicht einfach über den linken Rand zentrieren kann: xxpx; Rand rechts: xxpx;

Das Problem ist, dass dies aus irgendeinem Grund nicht funktioniert:

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

Ich kroch durch das Web und fand nichts. Ich habe versucht, einen Container div und nada zu machen. Ich habe andere Kombinationen ausprobiert und gurnisht. Wie kann ich das erreichen?

Vielen Dank

Sie sollten eine klebrige Fußzeilenlösung wie diese verwenden:

* {
    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 */
}

Es gibt andere wie diese;

* {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;}

mit dem HTML:

<div id="wrap">

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

    </div>

</div>

<div id="footer">

</div>

überarbeiteter Code von Daniel Kanis :

Ändern Sie einfach die folgenden Zeilen in CSS

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

und in html:

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

Eine jQuery-Lösung

$(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>

Manchmal ist es einfacher, JS zu implementieren, als altes CSS zu hacken.

http://jsfiddle.net/gLhEZ/

Das Problem liegt in position: static. Statische Mittel tun überhaupt nichts mit der Position. position: absoluteist was du willst. Das Zentrieren des Elements ist jedoch immer noch schwierig. Folgendes sollte funktionieren:

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

oder

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

Aber ich empfehle die erste Methode. Ich habe Zentriertechniken aus dieser Antwort verwendet: Wie zentriere ich ein absolut positioniertes Element in div?

Ich sehe zwei mögliche Probleme:

1 - IE hatte Probleme mit der Position: in der Vergangenheit behoben. Wenn Sie IE7 + mit einem gültigen Doctype oder einem Nicht-IE-Browser verwenden, ist dies nicht Teil des Problems

2 - Sie müssen eine Breite für die Fußzeile angeben, wenn das Fußzeilenobjekt zentriert werden soll. Andernfalls wird standardmäßig die gesamte Breite der Seite verwendet und der automatische Rand für links und rechts auf 0 gesetzt. Wenn die Fußzeilenleiste die Breite (wie die StackOverflow-Hinweisleiste) einnehmen und den Text zentrieren soll, müssen Sie um Ihrer Definition "text-align: center" hinzuzufügen.

Ich habe das 'Problem Div in einem anderen Div' eingeschlossen. Nennen wir dieses Div das Enclose Div. Machen Sie das Enclose Div in CSS zu einer Breite von 100% und einer festen Position mit einem Boden von 0 ... und fügen Sie dann das Problem Div in ein das beilegen div so würde es aussehen

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

dann in html ...

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

So ist es richtig!
- Hypertextie

Basierend auf dem Kommentar von @Michael:

Es gibt einen besseren Weg, dies zu tun. Erstellen Sie einfach den Körper mit der Position: relativ und einem Polster in der Größe der Fußzeile + dem Abstand zwischen Inhalt und Fußzeile, den Sie möchten. Dann machen Sie einfach eine Fußzeile div mit einem absoluten und unteren: 0.

Ich habe nach der Erklärung gesucht und es läuft darauf hinaus:

• Standardmäßig wird die absolute Position von unten: 0px auf den unteren Rand des Fensters gesetzt ... nicht auf den unteren Rand der Seite.
• Relative Positionierung Ein Element setzt den Bereich der absoluten Position seiner Kinder zurück. Wenn Sie also den Körper auf relative Positionierung einstellen, spiegelt die absolute Position von unten: 0px jetzt wirklich den unteren Rand der Seite wider.

Weitere Details unter http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Hier ist ein Beispiel mit CSS-Raster.

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>

Sie können CSS-Raster verwenden: ein konkretes Beispiel

Ich stieß auf ein Problem, bei dem das typisch war position: fixedund bottom: 0nicht funktionierte. Entdeckt eine nette Funktionalität mit position: sticky. Beachten Sie, dass es "relativ" neu ist, sodass es mit IE / Edge 15 und früheren Versionen nicht funktioniert.

Hier ist ein Beispiel für 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>