Hoe voettekst onderaan scherm [DUPLICEER]

Wat is de beste oefening voor het instellen van een webpagina, zodat als er heel weinig inhoud / tekst op die webpagina moet worden weergegeven, de voettekst onder aan het browservenster wordt weergegeven en niet halverwege de webpagina op de hoogte is van de webpagina?


Antwoord 1, Autoriteit 100%

Wat u zoekt, is de CSS-kleverige voettekst .

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
}
#main {
  overflow: auto;
  padding-bottom: 180px;
  /* must be same height as the footer */
}
#footer {
  position: relative;
  margin-top: -180px;
  /* negative value of footer height */
  height: 180px;
  clear: both;
  background-color: red;
}
/* Opera Fix thanks to Maleika (Kohoutec) */
body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;
  /* thank you Erik J - negate effect of float*/
}
<div id="wrap">
  <div id="main"></div>
</div>
<div id="footer"></div>

Antwoord 2, Autoriteit 39%

U zou position:fixed;naar bottom.

bijvoorbeeld:

#footer{
 position:fixed;
 bottom:0;
 left:0;
}

Antwoord 3, Autoriteit 2%

html

<div id="footer"></div>

CSS

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:100px;   
   background:blue;//optional
}

Antwoord 4

stel de position:fixed en bottom:0 zo in dat deze altijd onder in uw browservensters staat


Antwoord 5

Misschien is het het gemakkelijkst om position: absolutete gebruiken om naar de onderkant te fixeren, en dan een geschikte marge/opvulling om ervoor te zorgen dat de andere tekst er niet overheen loopt.

p>

css:

<style>
  body {
    margin: 0 0 20px;
  }
  .footer {
    position: absolute;
    bottom: 0;
    height: 20px;
    background: #f0f0f0;
    width: 100%;
  }
</style>

Hier is de belangrijkste html-inhoud.

<div class="footer"> Here is the footer. </div>

Antwoord 6

gebruik deze stijl

min-height:250px;
height:auto;

Other episodes