CSS: unten fixiert und zentriert

79

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

CamelCamelCamel
quelle
Wird es nicht zentriert? Oder nicht am Ende der Seite positioniert? oder beides?
brettkelly
Ich kann das eine nicht ohne das andere geschehen lassen. Wenn beide Regeln geschrieben sind, bleibt sie unten, aber auch links.
CamelCamelCamel
4
Ich weiß, dass dies ein alter Beitrag ist. Aber es gibt einen besseren Weg, dies zu tun. Erstellen Sie einfach den Körper mit position:relativeund paddingder Größe der Fußzeile + dem Abstand zwischen Inhalt und Fußzeile, den Sie möchten. Dann machen Sie einfach eine Fußzeile mit einem absoluteund bottom:0. Boom macht das Dynamit.
Michael
Normalerweise benutze ich jetzt Compass dafür.
CamelCamelCamel
@ Michael, dein Kommentar sollte eine Antwort sein. Ich wünschte, ich hätte es früher gesehen.
lmsurprenant

Antworten:

52

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>
marcgg
quelle
1
Das ist nicht wahr. Wenn Sie eine feste oder absolute Positionierung verwenden, wird das Element durch Angabe nur einer unteren Position am unteren Rand befestigt. Wenn Sie so etwas tun, bleibt das Element IMMER am Boden hängen, egal was passiert. Eine klebrige Fußzeile ist die einzige Möglichkeit, eine Fußzeile zum Festhalten zu bringen, wenn der Körper kürzer als das Ansichtsfenster ist, und sich nach unten zu bewegen, wenn er größer ist.
Jrista
43

ü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>
malsony
quelle
unten: 0 alles was ich brauchte
danday74
26

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/

Thilo Savage
quelle
6

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?

AccidentalTaylorExpansion
quelle
3

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.

Rob Allen
quelle
3

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

Daniel Kanis
quelle
1

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/

lmsurprenant
quelle
0

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

Firas Omrane
quelle
0

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>

Joseph Cho
quelle