Voettekst aan onderkant van pagina corrigeren

Hoewel de meeste pagina’s op mijn site genoeg inhoud hebben om voor de meeste mensen de voettekst naar de onderkant van de pagina te duwen. Ik zou graag willen weten dat het vanaf nu sowieso altijd aan de onderkant vastzit, ongeacht de schermgrootte.

Ik heb een aantal manieren geprobeerd, zoals bottom: 0x; position:absolute: enz. Lijkt nooit erg goed te werken, duwt af en toe de footer uit zijn container om op de bodem te bevestigen met behulp van enkele van die voorbeelden daar.

Inbegrepen is de HTML en CSS voor de twee delen van de voettekst (voettekst en copyrightbalk). Ze zitten sowieso allebei in een <section id="footer"> div.

Ik heb mijn pogingen om het te laten plakken verwijderd, zodat mensen het nu kunnen bekijken en zien wat de huidige code moet wijzigen.

Live URL – http://www.mangdevelopment.co.uk/nakedradish

(Het is een restaurantwebsite. Maak je geen zorgen over het woord ‘naakt’).

HTML

<section id="footer">
  <div class="container">
    <div class="row">
      <div class="span1">
        <div id="small-logo">
          <img src="img/small-logo.png" />
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>OUR BOXES</h6>
          <ul>
            <a href="#">
              <li>Classic Box</li>
            </a>
            <a href="#">
              <li>Vegetarian Box</li>
            </a>
            <a href="#">
              <li>Family Box</li>
            </a>
            <a href="#">
              <li>Dinner Party Box</li>
            </a>
            <a href="#">
              <li>Gift Box</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>OUR RECIPES</h6>
          <ul>
            <a href="#">
              <li>Last Weeks Feature</li>
            </a>
            <a href="#">
              <li>Next Weeks Feature</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>ABOUT US</h6>
          <ul>
            <a href="#">
              <li>The Food</li>
            </a>
            <a href="#">
              <li>How We Sourcex</li>
            </a>
            <a href="#">
              <li>Sustainability</li>
            </a>
            <li><a href="about.html">About Us</a></li>
            <a href="#">
              <li>Contact Us</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span5">
        <div id="twitter">
          <img src="img/twitter-logo.png" alt="" title="" height="50" width="50" class="twitter-logo" />
          <div class="tweet-bg">
            <div class="tweets">
              <p>@chefallanp that's just not on really</p>
            </div>
            <div id="follow-btn">
              <img src="img/follow-us.jpg" />
            </div>
          </div>
        </div>
        <div class="checkout-options">
          <h6>SECURE CHECKOUT</h6>
          <ul>
            <li><img src="img/solo-logo.png" /></li>
            <li><img src="img/switch-logo.png" /></li>
            <li><img src="img/maestro-logo.png" /></li>
            <li><img src="img/visa-logo.png" /></li>
            <a href="#">
              <li><img src="img/facebook-logo.png" /></li>
            </a>
            <a href="#">
              <li><img src="img/twitter-logo-flat.png" /></li>
            </a>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="copyright-bar">
  <div class="container">
    <div class="row">
      <div class="copyright-content">
        <div class="span4">
          <p>The Naked Radish Limited. 2013 All rights reserved.</p>
        </div>
        <div class="span4 offset4">
          <div class="copyright-list">
            <ul>
              <a href="terms.html">
                <li>Terms &amp; Conditions</li>
              </a>
              <a href="privacy.html">
                <li> - Privacy Policy</li>
              </a>
              <a href="#">
                <li> - Cookie Policy</li>
              </a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS:

#footer {
    background-color: #F3F3F3;
    padding-top: 10px;
    padding-bottom: 0px;
}

Antwoord 1, autoriteit 100%

Voor uw footer:

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

Voor je body:

body {
    margin-bottom:50px;
}

Antwoord 2, autoriteit 45%

We kunnen FlexBox gebruiken voor Sticky Footer en Header zonder POSITIES in CSS te gebruiken.

.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="[email protected]*" 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>

Antwoord 14

Flex en Bootstrap4 gebruiken (als u Bootstrap4 niet gebruikt, kunt u hetzelfde resultaat bereiken met de flex-eigenschappen)

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes