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
css
positioning
sticky-footer
CamelCamelCamel
quelle
quelle
position:relative
undpadding
der Größe der Fußzeile + dem Abstand zwischen Inhalt und Fußzeile, den Sie möchten. Dann machen Sie einfach eine Fußzeile mit einemabsolute
undbottom:0
. Boom macht das Dynamit.Antworten:
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>
quelle
ü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>
quelle
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/
quelle
Das Problem liegt in
position: static
. Statische Mittel tun überhaupt nichts mit der Position.position: absolute
ist 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?
quelle
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.
quelle
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
quelle
Basierend auf dem Kommentar von @Michael:
Ich habe nach der Erklärung gesucht und es läuft darauf hinaus:
Weitere Details unter http://css-tricks.com/absolute-positioning-inside-relative-positioning/
quelle
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
quelle
Ich stieß auf ein Problem, bei dem das typisch war
position: fixed
undbottom: 0
nicht funktionierte. Entdeckt eine nette Funktionalität mitposition: 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>
quelle