html - adsense script code




Posiziona il piè di pagina nella parte inferiore della pagina con intestazione fissa (4)

Come hai detto, position: fixed posizionerebbe il footer rispetto al viewport piuttosto che alla pagina stessa. Pertanto, dobbiamo mantenere l'elemento nel flusso normale e in qualche modo posizionarlo nella parte inferiore della pagina.

Ci sono un paio di approcci per raggiungerlo, che sono stati discussi in natura durante il tempo.
Per esempio:

Piè di pagina appiccicoso

In questa risposta andrei con il metodo di Ryan Fait poiché è semplice e facile da capire e soddisfa anche le tue esigenze (Situazioni in cui sia l'intestazione sia il piè di pagina hanno altezze fisse) .

Considerando la struttura sottostante:

<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>

Sono necessari i seguenti passaggi:

  1. Impostare l' height degli elementi <html> e <body> al 100% che è richiesta per il passaggio successivo 1 .

  2. La cosa più importante che dobbiamo fare è assicurarci che il #content sia abbastanza alto da spingere il #footer basso nella pagina. Quindi diamo il #content min-height del 100% .

  3. Finora , il #content ha preso il 100% dell'altezza del viewport, quindi dovremmo tirare il footer verso l'alto per posizionarlo nella parte inferiore della pagina. Per fare ciò potremmo dare al #content un margin-bottom negativo margin-bottom equivalente height del piè di pagina. Inoltre, per assicurarti che il piè di pagina appaia sopra il contenuto, dovremmo position il piè di pagina relative . Demo qui .

  4. Come si può vedere, quando il #content cresce per il suo contenuto, parte del contenuto va dietro al piè di pagina. Potremmo evitarlo aggiungendo un elemento spaziatore alla fine di #content o usando la combinazione di padding-bottom e box-sizing: border-box 2 che dovrebbe essere supportato anche su IE8 .

4.1 Aggiunta di un distanziatore

Esempio qui

<div id="content">
    <!-- content goes here -->
    <div class="spacer"></div>
</div>
<div id="footer">Footer</div>
.spacer, #footer { height: 100px; }

4.2 Combinazione di padding-bottom e box-sizing

Esempio aggiornato

#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

(Si noti che i prefissi dei produttori omessi per brevità)

Aggiungere l'intestazione

  1. Se l'intestazione dovrebbe rimanere nel flusso normale , potresti semplicemente aggiungerla al #content come segue:
    ( Esempio qui )

    <div id="content">
        <div id="header">Header</div>
        ...
  2. Ma se dovrebbe essere posizionato assolutamente 3 , dobbiamo spingere il contenuto dell'elemento #content verso il basso per evitare sovrapposizioni .

Pertanto, ancora una volta, potremmo aggiungere uno spaziatore all'inizio di #content ( Esempio qui ):

<div id="header">Header</div>
<div id="content">
    <div class="header-spacer"></div> 
    <!-- content goes here -->
    <div class="footer-spacer"></div> 
</div>
<div id="footer">Footer</div>

Oppure usa la combinazione di padding-top e box-sizing come segue:

<div id="header">Header</div>
<div id="content"> <!-- content goes here. --> </div>
<div id="footer">Footer</div>
#content {
    min-height: 100%;
    margin-bottom: -100px; /* Equivalent to footer's height */

    padding-top   : 50px;  /* Equivalent to header's height */
    padding-bottom: 100px; /* Equivalent to footer's height */

    box-sizing: border-box;
}

Esempio aggiornato (notare che i prefissi dei produttori omessi per brevità)

Ultimo ma non meno importante!

Al giorno d'oggi, tutti i principali browser Web moderni supportano il box-sizing: border-box dichiarazione box-sizing: border-box (incluso IE8). Tuttavia, se stai cercando il modo tradizionale che ha un supporto browser più ampio, segui l'uso degli elementi spacer.

1. Questo è necessario per rendere min-height: 100% per lavorare sull'elemento #content (perché un valore percentuale è relativo height del blocco contenitore della scatola stabilito dal <body> ). Anche <html> dovrebbe avere height esplicita per rendere l' height: 100% per lavorare su <body> .

2. box-sizing: border-box consente agli UA di calcolare la width / height della scatola, inclusi il riempimento e i bordi.

3. Secondo le specifiche , gli elementi posizionati in modo assoluto sono elementi che hanno una position absolute o fixed .

Voglio posizionare il footer in fondo alla pagina che ha un header fisso anche ...

  • Non con position: fixed - Non voglio che rimanga sullo schermo, dovrebbe essere solo alla fine della pagina e comportarsi normalmente durante lo scorrimento.

  • Non nella parte inferiore dello schermo visibile - Nella parte inferiore della pagina , vale a dire; dopo tutti gli altri contenuti.

Ecco un diagramma per spiegare meglio:

Ecco il codice:

  • Ho preparato una demo: JSFiddle
  • O vedi sotto
<div id="header">Header</div>
<div id="content">
    <p>Some content...</p>    
</div>
<div id="footer">Footer</div>
body{
    /* Just to enable scrolling in JSFiddle */
    height: 1000px;
}

#header{
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    z-index: 1;
}

#content{
    width: 100%;
    position: absolute;
    top: 100px; /*Height of header*/
    z-index: 0;
}

#footer{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
}

/*For demo only*/
#header, #footer{
    border: 3px dashed #333333;
    background: #FFFFFF;
}

#content{
    background: #CCCCCC;
    height: 200px;
}

L'hai quasi capito. Quello di cui hai bisogno è un contenitore.

Ecco il mio bit rivisto: JSFiddle Update

Aggiungi un div contenitore:

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

Quindi imposta la posizione relativa e l'altezza al 100%:

#container {
    height: 100%;
    position: relative;
}

E assicurati che la posizione sia assoluta per il footer.


Per farlo semplice:

#header {
    position: fixed;
    width:100%;
    height:100px;
    top:0px;
    z-index:2;
}
#content, #footer {
    position: relative; /* or leave it static as by default */
    z-index:1;
}
body,div {
    margin:0; padding:0; /* http://jsfiddle.net/css/normalize.css */
}
#content {
    margin-top: 100px; /* the same value as header's height */
}

jsfiddle


Sono piuttosto nuovo nello sviluppo del web, e so che a questo è già stata data una risposta, ma questo è il modo più semplice che ho trovato per risolverlo e penso che sia in qualche modo diverso. Volevo qualcosa di flessibile perché il mio footer può avere diverse altezze in diverse sezioni dell'app web. E ho finito per usare FlexBox e un distanziatore.

  1. Inizia impostando l'altezza per il tuo html e il tuo corpo
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Sto assumendo il comportamento di una column per la nostra app, nel caso sia necessario aggiungere un'intestazione, un eroe o qualsiasi contenuto allineato verticalmente.

  1. Crea la classe spaziatore
.spacer {
    flex: 1; 
}
  1. Quindi più tardi il tuo codice HTML potrebbe essere qualcosa di simile
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Puoi giocarci qui https://codepen.io/anon/pen/xmGZQL







sticky-footer