Come si fa a ottenere il piè di pagina nella parte inferiore di una pagina Web?

StackOverflow https://stackoverflow.com/questions/42294

Domanda

Ho un semplice layout a 2 colonne con un piè di pagina che cancella sia a destra che a sinistra div nel mio markup.Il mio problema è che non riesco a piè di pagina nella parte inferiore della pagina in tutti i browser.Funziona, ma solo se il contenuto spinge il piè di pagina in basso, ma che non è sempre il caso.

Aggiornamento:

Non funziona correttamente in Firefox.Sto vedendo una striscia di colore di sfondo sotto il piè di pagina quando non c'è abbastanza contenuti della pagina per spingere il piè di pagina tutta la strada fino al fondo della finestra del browser.Purtroppo, questo è lo stato di default della pagina.

È stato utile?

Soluzione

Per ottenere un appiccicoso piè di pagina:

  1. Hanno un <div> con class="wrapper" per i tuoi contenuti.

  2. A destra prima la chiusura </div> del wrapper posizionare il <div class="push"></div>.

  3. A destra dopo la chiusura </div> del wrapper posizionare il <div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Altri suggerimenti

Utilizzare i CSS vh unità!

Probabilmente il più ovvio e non sporca per andare su di un appiccicoso piè di pagina sarebbe quello di fare uso di nuovo css viewport unità.

Prendiamo ad esempio il seguente markup semplice:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

Se l'intestazione è dire 80px alta e il piè di pagina è 40px alta, allora possiamo fare la nostra sticky footer con una sola regola il contenuto del div:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

Il che significa:lasciate che l'altezza del contenuto div essere almeno Il 100% dell'altezza della finestra meno il combinato altezze di intestazione e piè di pagina.

Che è.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

...ed ecco come lo stesso codice funziona con un sacco di contenuti nel contenuto del div:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

NB:

1) L'altezza dell'intestazione e del piè di pagina deve essere conosciuto

2) le Vecchie versioni di IE (IE8-) e Android (4.4-) non supportano la viewport unità.(caniuse)

3) una volta webkit avuto un problema con il viewport unità all'interno di un calc regola.Questo è infatti stata fissatavedi qui) quindi non c'è nessun problema.Tuttavia, se si sta cercando di evitare l'uso di calc per qualche ragione, non si può andare in giro che l'utilizzo di margini negativi e imbottitura con box-sizing -

In questo modo:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

Sticky footer con display: flex

Soluzione ispirata Philip Walton appiccicoso di piè di pagina.

Spiegazione

Questa soluzione è valido solo per:

  • Chrome ≥ 21.0
  • Firefox ≥ 20.0
  • Internet Explorer ≥ 10
  • Safari ≥ 6.1

Esso è basato sulla flex display, sfruttando l' flex-grow proprietà, che consente un elemento di crescere in entrambi i altezza o larghezza (quando il flow-direction è impostato a column o row rispettivamente), per occupare lo spazio nel contenitore.

Abbiamo intenzione di sfruttare anche il vh unità, dove 1vh è definito come:

1/100th l'altezza della finestra

Quindi un altezza di 100vh si tratta di un modo rapido per dire che un elemento coprono l'intera viewport altezza.

Questo è il funzionamento della struttura di pagina web:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

Per avere il piè di pagina si attacchi al fondo della pagina, si desidera che lo spazio tra il corpo e piè di pagina a crescere, quanto serve per spingere il piè di pagina nella parte inferiore della pagina.

Pertanto il nostro layout diventa:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

Attuazione

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}
<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

Si può giocare con essa in il JSFiddle.

Safari stranezze

Essere consapevoli del fatto che Safari ha un cattiva attuazione della flex-shrink proprietà, che permette ai capi di ridursi più di quanto l'altezza minima che sarebbe necessario per visualizzare il contenuto.Per risolvere questo problema, è necessario impostare la flex-shrink proprietà in modo esplicito a 0 per il .content e il footer nell'esempio di cui sopra:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

Si potrebbe utilizzare position: absolute seguente per inserire il piè di pagina nella parte inferiore della pagina, ma poi assicurarsi che il 2 colonne appropriate margin-bottom in modo che non ottengono mai occluse da piè di pagina.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

Ecco una soluzione con jQuery che funziona come un fascino.Controlla se l'altezza della finestra è maggiore dell'altezza del corpo.Se lo è, allora cambia il margine superiore del piè di pagina per compensare.Testato in Firefox, Chrome, Safari e Opera.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

Se il tuo piè di pagina ha già un margin-top (di 50 pixel, per esempio), è necessario modificare l'ultima parte:

css( 'margin-top', height_diff + 50 )

Impostare il CSS per il #footer a:

position: absolute;
bottom: 0;

Sarà quindi necessario aggiungere un padding o margin al fondo del tuo #sidebar e #content all'altezza del #footer o quando si sovrappongono, il #footer sarà la loro copertura.

Inoltre, se non ricordo male, IE6 è un problema con il bottom: 0 CSS.Si potrebbe usare un JS soluzione per IE6 (se ti interessa IE6 che è).

Una soluzione simile a @gcedo ma senza la necessità di aggiungere un intermedio contenuto al fine di spingere il piè di pagina verso il basso.Si può semplicemente aggiungere margin-top:auto a piè di pagina e sarà spinto verso il basso della pagina, indipendentemente dalla sua altezza o l'altezza del contenuto di cui sopra.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}
<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

Usare il posizionamento assoluto e z-index per creare uno sticky footer div, a qualsiasi risoluzione, utilizzando la seguente procedura:

  • Creare un piè di pagina con div position: absolute; bottom: 0; e l'altezza desiderata
  • Impostare il padding del piè di pagina per aggiungere spazio tra il contenuto di fondo e la finestra in basso
  • Creare un contenitore div che avvolge il corpo con contenuto position: relative; min-height: 100%;
  • Aggiungere in fondo imbottitura al contenuto principale div che è uguale all'altezza plus imbottitura del piè di pagina
  • Impostare il z-index il piè di pagina superiore del contenitore div se il piè di pagina è ritagliato

Ecco un esempio:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

Prova a mettere un div contenitore (con overflow:auto) circa il contenuto e la barra laterale.

Se questo non funziona, avete qualche screenshot o link di esempio dove il piè di pagina non viene visualizzata correttamente?

Una soluzione sarebbe quella di impostare il min-height per le finestre.Purtroppo sembra che non è ben supportato da IE (a sorpresa).

Nessuno di questi puro css soluzioni di funzionare correttamente con il ridimensionamento dinamico contenuto (almeno su firefox e Safari), ad esempio, se si dispone di un sfondo al div contenitore, la pagina e quindi ridimensionare (con l'aggiunta di un paio di righe) tabella all'interno del div, la tabella può attaccare fuori del fondo di stile, vale a dire, si può avere la metà della tavola in bianco e nero a tema e mezza la tabella completa colore bianco in quanto sia la font, il colore e il colore di sfondo è bianco.Si tratta fondamentalmente di insanabili con themeroller pagine.

Div nidificati multi-layout di colonna è un brutto hack e il 100% min-altezza corpo/div contenitore per attaccare il piè di pagina è di più brutto di un hack.

Il solo nessuno script soluzione che funziona su tutti i browser che ho provato:molto più facile/più breve tabella con thead (per intestazione)/tfoot (per il piè di pagina)/tbody (td per qualsiasi numero di colonne) e 100% di altezza.Ma questo hanno percepito semantic SEO e svantaggi (tfoot deve apparire prima tbody.ARIA ruoli possono aiutare decente motori di ricerca, però).

CSS :

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

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

Questo dovrebbe fare il trucco se siete alla ricerca di un reattivo piè di pagina allineato in basso della pagina,che mantiene sempre un alto margine di 80% dell'altezza della finestra.

Per questa domanda molte delle risposte che ho visto sono un po 'ingombranti, difficili da implementare e inefficiente, così ho pensato di prendere un colpo a esso e venire con la mia soluzione, che è solo un po' di css e html

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}
<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

questo funziona impostando l'altezza del piè di pagina e poi tramite css calc lavorare fuori l'altezza minima della pagina può essere con il piè di pagina ancora in fondo, spero che questo aiuta alcune persone :)

Io stesso ho lottato con questo a volte e ho sempre trovato che la soluzione con tutti coloro div all'interno di ogni altro era un disordinato soluzione.Ho solo pasticciato un po ' di tempo, e personalmente ho trovato che questo funziona ed è certamente uno dei modi più semplici:

html {
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

Quello che mi piace di questo è che nessun extra HTML deve essere applicato.Si può semplicemente aggiungere di questo CSS e poi scrivere il codice HTML come ogni volta che

Più persone hanno messo la risposta a questo semplice problema qui, ma ho una cosa da aggiungere, considerando come frustrato ero fino a quando ho capito che stavo sbagliando.

Come menzionato il modo più semplice per fare questo è così..

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

Tuttavia la proprietà di non menzionato nei post, presumibilmente perché di solito è di default, è il posizione:statico il tag body.Posizione relativa non funziona!

Il mio tema wordpress aveva sovrascritto automaticamente il display e mi ha confuso per un odioso lungo periodo di tempo.

Un vecchio thread lo so, ma se siete alla ricerca di un reattivo soluzione, questa jQuery aggiunta aiuterà: 

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

Guida completa può essere trovata qui: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Ho creato una semplice libreria https://github.com/ravinderpayal/FooterJS

È molto semplice da usare.Dopo aver incluso la libreria, basta chiamare questa riga di codice. 

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

Piè di pagina può essere modificato dinamicamente mediante il richiamo di funzione di cui sopra, con parametri diversi,/id. 

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

Nota: non modificare o aggiungere qualsiasi CSS.Libreria dinamica che implica che anche se lo schermo è ridimensionata dopo il caricamento della pagina si reimposta la posizione di piè di pagina.Ho creato questa raccolta, perché il CSS risolve il problema per un po', ma quando le dimensioni del display cambia in modo significativo,dal desktop al tablet o viceversa, essi si sovrappongono il contenuto o che non è più appiccicoso.

Un'altra soluzione è il CSS Media Query, ma devi scrivere manualmente diversi stili CSS per le diverse dimensioni degli schermi, mentre questa libreria funziona in modo automatico è supportato da tutti i JavaScript di base di supporto del browser.

Modifica CSS soluzione:

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

Ora, se l'altezza del display è più che il contenuto di lunghezza, faremo piè di pagina fisso verso il basso e se non, comparirà automaticamente in fine di visualizzare come si desidera scorrere per visualizzare questo.

E, mi sembra una soluzione migliore rispetto JavaScript/biblioteca.

Io non avere fortuna con le soluzioni proposte in questa pagina prima, ma poi, finalmente, questo piccolo trucco ha funzionato.Io sono come un'altra possibile soluzione.

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

Flexbox soluzione

Flex layout è preferito per la naturale intestazione e piè di pagina heights.Questo flex soluzione è testato con i browser moderni e funziona davvero :) in IE11.

Vedi JS Violino.

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

Per me il modo più bello di visualizzazione (piè di pagina) è attaccare a fondo, ma non riguardanti il contenuto di tutti i tempi:

#my_footer {
    position: static
    fixed; bottom: 0
}

jQuery CROSS BROWSER PLUGIN PERSONALIZZATO - $.footerBottom()

O jQuery, come faccio io, e impostare il vostro piè di altezza auto o fix, tutto ciò che ti piace, funziona comunque.questo plugin utilizza selettori jQuery in modo per farlo funzionare, è necessario includere la libreria jQuery per il tuo file.

Ecco come eseguire il plugin.Importazione jQuery, copiare il codice di questa usanza plugin per jQuery e importalo dopo l'importazione di jQuery!È molto semplice, ma importante.

Quando lo si fa, tutto quello che dovete fare è eseguire questo codice:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

non c'è bisogno di inserirlo all'interno del documento pronto evento.Verrà eseguito bene così com'è.Si ricalcola la posizione del piè di pagina quando la pagina viene caricata e quando la finestra ridimensionata.

Ecco il codice del plugin che non è necessario capire.Basta sapere come realizzarla.Si fa il lavoro per voi.Tuttavia, se volete sapere come funziona, basta guardare il codice.Ho lasciato i commenti per voi.

//import jQuery library before this script


// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

Il flex solutions ha lavorato per me per quanto riguarda fare il piè di pagina appiccicoso, ma, purtroppo, modifica il corpo a utilizzare flex layout fatto alcuni dei nostri layout di pagina cambia, e non per il meglio.Ciò che alla fine ha funzionato per me è stato:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

Ho ricevuto questo da ctf0 risposta a https://css-tricks.com/couple-takes-sticky-footer/

Dal momento che il Griglia la soluzione non sia stato già presentato, è qui, con solo due dichiarazioni per il elemento padre, se prendiamo il height: 100% e margin: 0 per scontato:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>

Gli elementi sono distribuiti in modo uniforme nell'allineamento contenitore lungo l'asse trasversale.La spaziatura tra ogni coppia di elementi adiacenti è l' stesso.Il primo elemento è a filo con il main-start edge, e l'ultimo la voce è a filo con il principale fine del bordo.

      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        border: 3px solid #73AD21;
      }
  <body style="height:1500px">

    <h2>position: fixed;</h2>

    <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

    <div class="fixed">
      This div element has position: fixed;
    </div>

  </body>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top