Voettekst aan onderkant van pagina corrigeren

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  height: 50px;
  flex-shrink: 0;
  background-color: #037cf5;
}
footer {
  height: 50px;
  flex-shrink: 0;
  background-color: #134c7d;
}
main {
  flex: 1 0 auto;
}

<div class="container">
  <header>HEADER</header>
  <main class="content">
  </main>
  <footer>FOOTER</footer>
</div>

Antwoord 3, autoriteit 9%

Voeg op deze manier position:fixed; en bottom:0; toe onder de selector #footer:

demo

CSS

#footer {
    background-color: #F3F3F3;
    padding-top: 10px;
    padding-bottom: 0px;
    position:fixed;
    bottom:0;
    width:100%;
}

Antwoord 4, autoriteit 5%

Instellen

html, body {
    height: 100%;
}

Verpak de volledige inhoud vóór de voettekst in een div.

.wrapper {
    height:auto !important;
    min-height:100%;
}

U kunt de min-hoogte naar wens aanpassen op basis van hoeveel van de voettekst u onder in het browservenster wilt weergeven. Als het is ingesteld op 90%, wordt 10% van de voettekst weergegeven voordat er wordt gescrolld.

Antwoord 5, autoriteit 3%

Hier is een eenvoudige CSS-oplossing die zal werken:

#fix-footer{
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 35px;
    width: 100%;
    background: #1abc9c;
}

Antwoord 6, autoriteit 3%

CSS

html {
    height:100%;
}
body {
    min-height:100%; position:relative;
}
.footer {
    background-color: rgb(200,200,200);
    height: 115px;
    position:absolute; bottom:0px;
}
.footer-ghost { height:115px; }

HTML

<div class="header">...</div>
<div class="content">...</div>
<div class="footer"></div>
<div class="footer-ghost"></div>

Antwoord 7, autoriteit 2%

Deze code werkt voor mij:

footer{
    background-color: #333;
    color: #EEE;
    padding: 20px;
    left: 0;
    width: 100%;
    bottom: 0;
    position: fixed;
}

Belangrijk dat u bottom:0; en position: fixed;

moet toevoegen

Antwoord 8

Ik vond de oplossing met plakkerige voettekst een beetje pijnlijk op responsieve sites, aangezien de hoogte van je navigatie- en voettekst kan verschillen, afhankelijk van het apparaat. Als u alleen geïnteresseerd bent in het werken met moderne browsers, kunt u uw doel bereiken met een beetje Javascript.

Als dit uw HTML is:

<div class="nav">
</div>
<div class="wrapper">
</div>
<div class="footer">
</div>

Gebruik dan deze JQuery op elke pagina:

$(function(){
  /* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */
  function setWrapperMinHeight() {
    $('.wrapper').css('minHeight', window.innerHeight - $('.nav').height() - $('.footer').height());
  }
  /* Make sure the main div gets resized on ready */
  setWrapperMinHeight();
  /* Make sure the wrapper div gets resized whenever the screen gets resized */
  window.onresize = function() {
    setWrapperMinHeight();
  }
});

Antwoord 9

Uw footer-element wordt niet inherent vastgezet aan de onderkant van uw viewport, tenzij u het op die manier opmaakt.
Dus als u een pagina heeft die niet genoeg inhoud heeft om het helemaal naar beneden te duwen het zal ergens in het midden van de viewport terechtkomen; er erg onhandig uitzien en niet zeker weten wat ze met zichzelf aan moeten, zoals mijn eerste dag op de middelbare school.

Het element positioneren door de regel fixed te declareren is geweldig als u altijd wilt dat uw voettekst zichtbaar is, ongeacht de aanvankelijke paginahoogte, maar vergeet niet om een ​​ondermarge in te stellen zodat deze de laatste niet overlapt beetje inhoud op die pagina. Dit wordt lastig als je footer een dynamische hoogte heeft; wat vaak het geval is bij responsieve sites, omdat het in de aard van elementen ligt om te stapelen.

U zult een soortgelijk probleem vinden met absolute positionering. En hoewel het het betreffende element uit de natuurlijke stroom van het document haalt, zal het het nog steeds niet aan de onderkant van het scherm fixeren als je merkt dat je een pagina hebt die weinig tot geen inhoud heeft om het uit te werken.

Overweeg dit te bereiken door:

1. Een hoogtewaarde declareren voor de <body> & <html>-tags
2. Een minimum-height-waarde declareren voor het geneste wrapper-element, meestal het element dat al uw onderliggende elementen in de body-structuur omhult (dit omvat niet uw footer element)

Voorbeeld van codepen

Antwoord 10

De voettekst moet onderaan de pagina worden geplaatst, maar niet vast.

CSS

html {
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  min-height: 100%;  
  padding: 0;
}
#header {
  background: #595959;
  height: 90px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  background-color: #595959;
}

HTML

<html>
   <head></head>
   <body>        
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>     
   </body>
</html>  

Antwoord 11

U kunt Rasterindeling gebruiken. Het is nieuwer dan Flexbox en wordt minder ondersteund in browsers.

Bekijk het:

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}   
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

Nuttige links:

Browser-ondersteuning: Kan ik gebruiken – rasterlay-out

Volledige gids: Grid Laoyut Guid

Antwoord 12

Mijn oplossing:

html, body {
  min-height: 100%
}
body {
  padding-bottom: 88px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 88px;
}

Antwoord 13

Een heel eenvoudig voorbeeld dat laat zien hoe u de voettekst onderaan in de lay-out van uw toepassing kunt corrigeren.

/* Styles go here */
html{ height: 100%;}
body{ min-height: 100%; background: #fff;}
.page-layout{ border: none; width: 100%; height: 100vh; }
.page-layout td{ vertical-align: top; }
.page-layout .header{ background: #aaa; }
.page-layout .main-content{ height: 100%; background: #f1f1f1; text-align: center; padding-top: 50px; }
.page-layout .main-content .container{ text-align: center; padding-top: 50px; }
.page-layout .footer{ background: #333; color: #fff; } 

<!DOCTYPE html>
<html>
  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <table class="page-layout">
      <tr>
        <td class="header">
          <div>
            This is the site header.
          </div>
        </td>
      </tr>
      <tr>
        <td class="main-content">
          <div>
            <h1>Fix footer always to the bottom</h1>
            <div>
              This is how you can simply fix the footer to the bottom.
            </div>
            <div>
              The footer will always stick to the bottom until the main-content doesn't grow till footer.
            </div>
            <div>
              Even if the content grows, the footer will start to move down naturally as like the normal behavior of page.
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="footer">
          <div>
            This is the site footer.
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

<body class="d-flex flex-column">
    <div>Header</div>
    <div>Main container</div>
    <div class="mt-auto">Footer</div>
</body>