Footer bootstrap, larghezza intera della pagina

sto progettando un sito Web con joomla e utilizzando il framework bootstrap. Ora ho un problema dal mio footer. Fondamentalmente io uso un semplice layout di griglia e voglio che la parte del contenuto del sito al centro della pagina con lo spazio a sinistra e il lato destro che ho già raggiunto. E ora voglio il piè di pagina non nel mezzo come il contenuto ma alla fine della pagina e su tutta la larghezza di esso e NON FISSO. Quindi voglio scorrere normalmente verso il basso la pagina e alla fine il piè di pagina deve apparire a tutta larghezza. L'ho cercato per molto tempo ma non ho trovato nessuna soluzione che funzionasse. Spero che qualcuno mi può aiutare a realizzarlo ...Footer bootstrap, larghezza intera della pagina

Nel seguito sono gli script del PHP-pagina e il file css ho usato

index.php

<!DOCTYPE html> 
<html> 
<head> 
    <jdoc:include type="head" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <!-- main container --> 
    <div class='container'> 
     <!-- header --> 
     <div class="mainMenuTop"/> 
     <div class='row'> 
      <jdoc:include type="modules" name="position-1" style="well" /> 
     </div> 
     <div class='row'> 
      <!-- main content area --> 
      <div class='span12'> 
       <div class="article"> 
        <jdoc:include type="component" /> 
       </div> 
      </div> 
     </div> 
     <!-- footer --> 
     <div class='row'> 
      <div class='span12'> 
       <div class='footer'> 
       <jdoc:include type="modules" name="footer" style="none" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

stile. css

body 
{ 
    overflow-y: scroll; 
    background: url(../images/Test.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.article 
{ 
    padding: 25px; 
    margin-top: 30px; 
    margin-bottom: 30px; 
    border-radius: 18px; 
    background: rgba(255, 255, 255, 0.5); 
    background: rgba(255, 255, 255); /* The Fallback */ 
    font-size: 12pt; 
    font-family:"Calibri", Times, serif; 
} 

.footer 
{ 
    height: 50px; 
    border-top: solid 1px black; 
}

Cordiali saluti, oodoloo

fonte

2014-04-09 oodoloo

È possibile mettere il piè di pagina per separare <div class="container"> dopo il contenitore del contenuto principale. Quindi puoi assegnare una classe contenitore che non limiti la larghezza del piè di pagina, come accade con il contenuto principale. Ad esempio ::

<div class="container"> 
     ... 
</div> 
<div id="footer" class="container-fluid"> 
    <div class="row">....</div> 
</div>

fonte

2014-04-09 18:24:56

Grazie per la rapida risposta! Ho provato questo, ma non era abbastanza per le mie esigenze. Ora non so come potrei ottenere che il div compili la pagina intera. E quando imposto una larghezza fissa il div si allarga solo sul lato destro, il lato sinistro inizia già nel punto in cui inizia il contenuto. Potete aiutarmi ancora una volta per favore? – oodoloo

Puoi creare un esempio isolato e ripetibile condiviso su jsfiddle.net o codepen.io? A meno che tu non possa leggere e modificare il codice attuale, senza troppi sforzi, possono essere forniti solo consigli generali. –

Ok, qui [jsfiddle-example] (http://jsfiddle.net/Pxmv7/) ho creato un esempio. Per il footer alla fine voglio raggiungere il risultato che ho descritto nel mio primo post. Spero che questo aiuti a risolvere il problema. Per la riproduzione di ciò che ho descritto nel mio ultimo commento devi aggiungere al footer css 'width: 800px' o 'width: 1500px' ad esempio. – oodoloo

per le mie esigenze, ora ho riparato come si può vedere qui: jsfiddle-example

.footer 
{ 
    height: 50px; 
    background-color: black; 
    position: absolute; 
    left: 0; 
    right: 0; 
    width: 100%; 
}

ho "width: 100%", ha aggiunto, "position: absolute", " left: 0 "e" right: 0 "alla classe css" .footer ". Penso che sia stata decisiva la "posizione: assoluta". Quindi devo aggiungere "left: 0" perché il lato sinistro non accetta il valore completo. dopo aver aggiunto questo lo fa. Il "giusto: 0" ho aggiunto, a causa della completezza. Non sa se è necessario in qualsiasi altro browser. Qui funziona anche senza di esso.

fonte

2014-05-10 10:42:16 oodoloo

Sì, a sinistra 0, a destra 0 risolto per me. –

faccio questo ed è giusto:

@media(max-width:500px){ 

    .footer{ 
     float:left; 
     width:109%; 
     margin-left:-5%; 
    } 

}

fonte

2016-08-31 21:19:07 Cristian

Footer bootstrap, larghezza intera della pagina

risposta

Problemi correlati