如何使页脚停留在页面底部？

Question

How can I fix my footer and keep it at the bottom? 如何固定页脚并将其保持在底部？ I have tried bottom:0; 我已经尝试了bottom:0; and a few other things but no luck, what is the best method to achieve this? 还有其他一些事情，但是没有运气，实现这一目标的最佳方法是什么？

https://jsfiddle.net/94wgz07s/ https://jsfiddle.net/94wgz07s/

<!DOCTYPE html>
<html>

    <head>
        <title>A. Willi A.G - Fachkräft für Rohr-Stahl Gebäudetechnik</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="2.css">
        <link rel="icon" type="image/ico" href="/images/favicon.png"/>
    </head>
    <body>
        <div id="banner">
        <img src="/images/logo.png">
        </div>


<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="/html/contact.html">Kontakt</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Bewerber</a>
    <div class="dropdown-content">
      <a href="#">Info</a>
      <a href="#">Jobs</a>
    </div>
  </li>
     <li class="dropdown">
        <a href="#" class="dropbtn">Kunde</a>
        <div class="dropdown-content">
             <a href="/html/personnel.html">Personalverleih</a>
                 <a href="/html/rental.html">Werkzeuge Mieten</a>
                    <a href="/html/refrences.html">Referenzen</a>
                 <a href="/html/quali.html">Qulität, Sicherheit und Weiterbildung</a>
         </div>
    </li>
</ul>


        <p>
            Die A. Willi AG ist als Personalverleiher mit über 35-jähriger Erfahrung in der ganzen Schweiz und im Ausland erfolgreich tätig. 
        </p>

        <p>
            Wir bringen erfahrene Arbeitskräfte und anspruchsvolle Kunden zusammen. Derzeit sind über 100 Arbeitnehmer für die A. Willi AG im Einsatz. 
        </p>



        <p>
           Wir haben uns spezialisiert auf dem Verleih von qualifiziertem Fachpersonal in den Bereichen Rohr – Stahl – Gebäudetechnik. Für die Beratung und Vermittlung sind in diesen Gebieten ausgewiesene Fachleute zuständig, welche als kompetente Partner mit unseren Kunden gemeinsam den Personaleinsatz planen.
        </p>


        <p>
            Unsere Kunden schätzen die hohe Qualität unserer Dienstleistungen und die auf langfristigen Erfolg und faire Partnerschaft ausgerichtete Strategie. 

        </p>

        <div class="image1">
        <img alt="A screenshot showing CSS Quick Edit" src="/images/3.png" width="100%" height="40%" />
        </div>

        </a>

        <p>
            Wir suchen laufend hoch qualifiziertes Fachpersonal mit ausgewiesener Berufserfahrung. Wir bieten ihnen, Faire Anstellungsbedingungen, kostenlose Arbeitsbekleidung und PSA Ausrüstung, Weiterbildung in Beruf und Sicherheit.
        </p>
        <p>
            Unsere Dienstleistungen verbessern wir kontinuierlich, um unseren Kunden einen Qualitativen, zuverlässigen und individuellen Service zu bieten.
        </p>


        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>

        <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>


        <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>

        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>

        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>

        <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>


        <div id="content_footer"></div>
         <div id="footer">
         <p><a href="index.html">&copy; A.Willi A.G</a> | <a href="examples.html">Wasgenring 94</a> | <a href="page.html">CH-4055 Basel</a> | <a href="another_page.html">admin@awilli-ag.ch</a> | <a href="contact.html">Kontakt Aufnehmen</a></p>

    </div>

    </body>
</html>

CSS CSS

html {
    background: lightgrey;
    -webkit-font-smoothing: antialiased;

}

body {
    background: #fff;
    color: black;
    font-family: "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 900px;
    padding: 2em 0.5em 4em;
}



h2 {
    margin-top: 1.3em;
}




samp {
    display: none;
}

img {
    background: transparent;
    display: block;
    margin: 1.3em auto;
    max-width: 100%;
}




ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: -2%;


}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #333;
 color: darkgray;
  text-decoration: none;}


li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}



#banner {
    margin-top: -8%;
    width:100%;
    min-height:189px;
}


#footer
{ width: 100%;
  font-family: 'Helvetica', sans-serif;
  font-size: 100%;
  height: 80px;
  padding: 28px 0 5px 0;
  text-align: center; 
  background: #333;
  border-top: 2px solid #333;
  color: #FFF;
  bottom: 0;
  left: 0;

}

#footer p
{ line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer a
{ color: #FFF;
  text-decoration: none;}

#footer a:hover
{ color: darkgray;
  text-decoration: none;}

Answer 1

If by bottom you mean remove that spacing. 如果说到底部，则意味着删除该间距。

Remove the bottom: 0; 拆下bottom: 0; and add position: absolute; 并添加position: absolute;

If not, then like Ron Basco said, use position: fixed; 如果没有，则像罗恩·巴斯克（Ron Basco）所说，使用position: fixed; and adjust your padding to something more along padding: 2em 0.5em 9em; 并沿着padding: 2em 0.5em 9em;调整更多的padding: 2em 0.5em 9em;

如何使页脚停留在页面底部？

问题描述

1 个解决方案

解决方案1
0 2016-12-12 02:40:45

如何使页脚停留在页面底部？

问题描述

1 个解决方案

解决方案1 0 2016-12-12 02:40:45

解决方案1
0 2016-12-12 02:40:45