css footer nu se afișează în partea de jos a paginii (Programare, Html, Css)

user2135867 a intrebat.

acesta este codul meu pentru footer-ul meu, cum pot face ca acesta să se afișeze în partea de jos a paginii, mai degrabă decât chiar sub conținutul meu de deasupra?

/*footer */
#footer .column {
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

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

Notă: NU trebuie să fie un footer fix.

Comentarii

  • Care este diferența dintre un „footer fix” și afișarea întotdeauna a footer-ului în partea de jos a paginii? –  > Por showdev.
  • Răspunsul meu v-a rezolvat problema? –  > Por Scott Bartell.
  • @showdev Un footer fix este lipicios. În partea de jos a paginii înseamnă că nu există niciun div sub footer, dar nu este întotdeauna acolo dacă sunteți derulat în sus. –  > Por AlxVallejo.
10 răspunsuri
Scott Bartell

Există într-adevăr două opțiuni principale:

  1. Footer fix – footer-ul este întotdeauna vizibil în partea de jos a paginii
  2. Footer împins – subsolul de pagină este împins în partea de jos a paginii chiar și atunci când conținutul nu umple fereastra

Cel mai simplu dintre cele două este footerul fix.

Footer fix

Pentru a face ca footer-ul să fie fix, în CSS setați poziția footer-ului la fixă position:fixed și poziționați footer-ul în partea de jos a paginii bottom:0px. Iată un fragment de cod din CSS-Tricks.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Footer împins

Un footer împins este un pic mai complicat. Iată un grafic excelent care arată de ce footer-ul nu rămâne în partea de jos a paginii atunci când nu există suficient conținut:

Practic, problema se întâmplă deoarece elementul de subsol este „împins” sub elementul de deasupra lui, iar înălțimea acelui element nu este la fel de mare ca înălțimea paginii. Pentru a remedia această problemă, trebuie să vă asigurați că footerul este „împins” pe toată înălțimea paginii (minus înălțimea footerului).

Iată cum se face acest lucru:

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html, body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

Iată un exemplu mai detaliat mai detaliat despre cum se face acest lucru precum și sursa codului de mai sus.

Și iată și un demonstrație de lucru a codului din aceeași sursă.

Comentarii

  • Da, cam așa ceva. Acest footer css poate fi aplicat la orice. margin-bottom:0px; sau doar bottom:0px va funcționa, dar dacă doriți ca antetul să fie întotdeauna în partea de sus, se poate face cu top:0px. Poate fi aplicat cu orice, cu aceste tag-uri left, right, top, bottom, or margin-[position] where position = stânga, dreapta, sus sau jos. Cred că ar trebui să menționezi acest lucru @Scott pentru a preveni întrebările duplicate. Bună treabă 😀 –  > Por Mee.
  • Asigură-te că nu ești ca mine și că nu scrii din greșeală body { min-height: 100% } Nu funcționează, în cazul în care vă întrebați. –  > Por Brandon White.
shadowsora

Bootstrap au un exemplu de footer care se lipește de partea de jos a paginii aici:https://getbootstrap.com/examples/sticky-footer/

Aici este CSS-ul:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Apoi, în HTML:

<footer class="footer">

</footer>

kulbhushan charaya

Fixează-ți footer-ul în partea de jos cu efect cool
Verificați designul paginii complete în jsfiddle Jsfiddle

<body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
    <h1>kulbhushan charaya</h1>
</footer>
</body>

și css este

body {
    background: #ffffff none repeat scroll 0 0;
    padding:40px 0;
}
header{
  position:fixed;
  top:0;
  z-index:999;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #ccc;
}
header ul li {
  display: inline-block;
  list-style: outside none none;
  padding: 5px;
}
header ul li a {
    color: #000000;
    text-decoration: none;
}
footer {
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: -1;
}
footer h1 {
  margin: 0;
}
.wrapper {
  background: #ffffff;
  padding: 0 15px;
  z-index: 1;
}

Zumo

dacă cineva este blocat cu acest lucru din nou, aceasta este o soluție modernă fără hacks

HTML:

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with position: absolute;.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

CSS:

/**
 * Demo Styles
 */

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Stephen J

este posibil să fie nevoie să setați înălțimea elementului html la 100%, altfel pagina în sine va avea doar înălțimea necesară pentru conținutul dvs. M-am confruntat și eu cu acest lucru.

stcheng
#main {padding-bottom: 150px;} /* Should have the same value of footer's height */ 
#footer {position: relative; 
margin-top: -150px; /* footer's height */ 

Terry

Presupun că ceea ce vrei să spui este că ai dori ca subsolul paginii să rămână în partea de jos a paginii, chiar și atunci când nu există conținut suficient pe pagină pentru a umple înălțimea viewportului?

Dacă acesta este cazul, puteți folosi acest truc: CSS sticky footer – http://ryanfait.com/sticky-footer/, , http://www.cssstickyfooter.com/ sau http://css-tricks.com/snippets/css/sticky-footer/

Șmecheria cu piciorul de pagină lipicios se bazează de obicei pe declararea unei înălțimi minime pe un div de înveliș. Aceasta înseamnă că va trebui să reformatați codul HTML după cum urmează:

<div id="wrap">
    <div id="content">
        /* Main body content */
    </div>
</div>

<div id="footer">
    /* Footer content here */
</div>

Pentru CSS:

html, body, #wrap {
    height: 100%;
}
#wrap {
    height: auto;
    min-height: 100%;
}
#content {
    overflow: hidden;
    padding-bottom: (footer height);
}
#footer { 
    position: relative;
    margin-top: -(footer height); /* Note the negative value */
    height: (footer height);
    clear:both;
} 

Dacă footer-ul dvs. poate avea o înălțime variabilă, va trebui să setați padding-ul inferior al #content, , și marja superioară de #footer cu JavaScript. Valoarea depinde de înălțimea calculată pentru #footer în sine.

Comentarii

  • Acesta este un răspuns numai pentru link-uri. Vă rugăm să adăugați contextul pentru linkul dvs. –  > Por tckmn.
  • Am implementat acest cod și footer-ul rămâne în continuare în mijlocul paginii dacă conținutul nu ocupă întregul viewport. Există vreo excepție pe care ar trebui să o cunosc pentru a implementa acest lucru? –  > Por Kleigh.
CodyBugstein

Am rezolvat acest lucru folosind pur și simplu min-height în fișierul principal container din HTML-ul meu.

Deci, HTML:

<body>
    <div class="top-nav">My Nav Bar</div>
    <div class="main-container">
        All my content
    </div>
    <div class="footer">
        My footer
    </div>
</body>

și apoi CSS

.top-nav {
    height: 4rem;
}
.main-container {
    min-height: calc(100vh - 4rem - 4rem);
}
.footer {
    height: 4rem;
}

Cu SCSS puteți utiliza variabile pentru a urmări înălțimea top-nav și footer și apoi puteți face ceva de genul

.main-container {
  min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}

Acesta nu este un perfectă perfectă, deoarece nu va pune footer-ul exact exact în partea de jos a ecranului, dar îl va împinge în partea de jos atunci când conținutul este prea scurt și va împiedica ca footer-ul să fie în mijlocul ecranului.

xinthose

Material Design Bootstrap are o clasă excelentă: fixed-bottom. Este ceea ce folosesc eu.

Ars Khatri

Trebuie să setați înălțimea părintelui după ce footer-ul își stabilește automat poziția în partea de jos.

dacă nu puteți adăuga conținut sau înălțime în div părinte sau în secțiunea footer după ce apare această problemă.

Tags:,