wake-up-neo.net

Wie kann ich meine Fußzeile zwingen, am Ende einer Seite in CSS zu bleiben?

Das ist mein Code:

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

Ich habe keine Ahnung, was daran falsch ist - kann jemand helfen?

BEARBEITEN: Für etwas mehr Klarheit über das, was falsch ist: Die Fußzeile wird wie erwartet beim Laden der Seite angezeigt. Wenn jedoch die Höhe der Webseite größer als die Abmessungen auf dem Bildschirm ist, sodass eine Bildlaufleiste angezeigt wird, bleibt die Fußzeile an derselben Position. Das heißt, wenn die Höhe der Seite <= 100% ist, befindet sich die Fußzeile unten. Wenn die Seitenhöhe> 100% ist, befindet sich die Fußzeile NICHT unten auf dieser Seite, sondern unten auf dem sichtbaren Bildschirm.

EDIT: Überraschenderweise hat keine der folgenden Lösungen funktioniert. Am Ende implementierte ich stattdessen eine Sidebar.

25
oxo

Sie suchen wahrscheinlich nach diesem Beispiel :

<div class="wrapper">
    Your content here
    <div class="Push"></div>
</div>
<div class="footer">
    Your footer here
</div>

CSS:

Für eine 142-Pixel-Fußzeile

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
28
SLaks

Versuche dies:

position: fixed;  
bottom: 0;
8
jeegnesh

Ich hatte die gleiche Frage, kam hier auf der Suche nach einer Antwort, fand sie nicht, probierte dann ein paar Experimente aus und bekam schließlich die Lösung

#body {
  overflow-y: 0 auto;
}
#footer {
  position: fixed;
  top: 100vh; left: 0;
  margin-top: -100px;
  width: 100%; height: 100px;
  padding: 10px;
  color: #fff; background-color: rgba(0,0,0,0.6);
}
<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
  <span>Some dummy Text</span>
</div>

2
Fabricio

Der Wrapper ist der Rest Ihrer Seite. Die negativen/positiven Werte für Rand/Höhe sind der Ort, an dem die Magie stattfindet. 

.wrapper 
  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
  }
.footer, .Push 
  {
    height: 142px; /* .Push must be the same height as .footer */
  }
1
k to the z

Position nicht verwenden: absolut; für jede Fußzeile, da sich die Höhe der Seite ändert. Wenn es absolut ist, bewegt sich Ihre Fußzeile nicht mit der Seitenhöhe.

Sie möchten die Methode von Ryan Fait verwenden.

Obwohl ich es persönlich so machen würde;

.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}

<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>

Auf diese Weise müssen Sie sich nicht mit negativen Rändern und Polsterungen herumschlagen. Auch dies kann leicht ein Teil von html5 sein, der #footer ändert

<footer>
</footer>
0
PHP

Ich bemühte mich, eine Lösung zu finden, da keiner der Vorschläge das erreichte, was ich wollte:

  • Wenn zu wenig Inhalt vorhanden ist, bleiben Sie am unteren Rand der Seite und nicht in der Mitte.
  • Wenn es genügend Inhalte gibt, bleiben Sie nicht überlappen und überlappen Sie den Inhalt. Bleiben Sie einfach unten.
  • Blenden Sie es auf den ersten Blick aus, also nur wenn der Benutzer nach unten blättert, wird die Fußzeile angezeigt.

Das hat bei mir funktioniert:

html:

<body>
  <div class="page-wrapper">
    <h1>
      Page
    </h1>
  </div>
  <footer>
    Footer here
  </footer>
</body>

css:

body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}

Hier in Aktion.

0
J0ANMM
.footer-small, .Push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

das funktioniert auch für mich ....

0
Makhi Ngubane
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
0
Samuel

Das habe ich getan und meine Fußzeile blieb unten. 

.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
0
Carla