Bootstrap 3 e Sticky Footer

nell'ultima ora ho cercato di capire cosa non funziona esattamente nel mio footer appiccicoso. Ho la stessa struttura dell'esempio fornito nel sito getboostrap, ma non sembra funzionare. Qualche idea su cosa è esattamente sbagliato?Bootstrap 3 e Sticky Footer

Tutti i file cst di bootstrap vengono caricati correttamente.

<body style=""> 

    <div id="wrap"> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="/">Application name</a> 
       </div> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="/">Home</a></li> 
         <li><a href="/Home/About">About</a></li> 
         <li><a href="/Home/Contact">Contact</a></li> 
        </ul> 
         <ul class="nav navbar-nav navbar-right"> 
     <li><a href="/Account/Register" id="registerLink">Register</a></li> 
     <li><a href="/Account/Login" id="loginLink">Log in</a></li> 
    </ul> 

       </div> 
      </div> 
     </div> 


     <div class="container"> 



<div class="jumbotron"> 
    <h1>ASP.NET</h1> 
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> 
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
     <h2>Getting started</h2> 
     <p> 
      ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that 
      enables a clean separation of concerns and gives you full control over markup 
      for enjoyable, agile development. 
     </p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Get more libraries</h2> 
     <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Web Hosting</h2> 
     <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p> 
    </div> 
</div> 
     </div> 

    </div> 

    <div id="footer"> 
     <div class="container"> 
      <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
     </div> 
    </div> 


</body>

Ho trovato la soluzione. Pensavo che includere tutti i CSS avrebbe anche il CSS per il footer ma apparentemente non lo è. Si richiede quanto segue per far funzionare un piè di pagina appiccicoso con bootstrap

html, 
body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -60px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
}

fonte

2013-09-28 teh0wner

Trovo difficile credere che questa è la soluzione più semplice per risolvere il piè di pagina verso il basso. – JohnAllen

Ti consiglierò questa soluzione: https://gist.github.com/martinbean/1855032 – Manza

ha effettuato un veloce violino con il tuo codice e alcune modifiche al piè di pagina: http://jsfiddle.net/2Zaxt/.

<div id="footer" class="container"> 
    <nav class="navbar navbar-default navbar-fixed-bottom"> 
     <div class="navbar-inner navbar-content-center"> 
      <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
     </div> 
    </nav> 
</div>

fonte

2013-09-28 19:36:38

+16

Il tuo esempio è un footer "fisso", non appiccicoso. Fisso è sempre visibile indipendentemente dalla lunghezza del contenuto verticale. Appiccicoso "si attacca al fondo" e quindi non è visibile quando c'è abbastanza contenuto verticale da richiedere lo scorrimento verso il basso, ma visibile, e in basso quando c'è un contenuto minimo. –

Riesco a vedere dove la nomenclatura non è sempre chiara ma questo sicuramente mi ha dato il risultato che volevo. Grazie. – Rig

perfetto uno ... –

html, 
body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
} 

/* Wrapper for page content to push down footer */ 
#wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by its height */ 
    margin: 0 auto -60px; 
    /* Pad bottom by footer height */ 
    padding: 0 0 60px; 
} 

/* Set the fixed height of the footer here */ 
#footer { 
    height: 60px; 
    background-color: #f5f5f5; 
}

fonte

2013-09-29 11:31:00 teh0wner

Questo è come ha funzionato per me.

ho aggiunto i valori ID piè di pagina e di stile personalizzato per tale ID, e per lo stesso look and feel aggiunto "navbar-default"

HTML

<div id="footer" class="navbar-default"> 
    <div class="container"> 
    <p>Your Footer Content Here</p>   
    </div> 
</div>

CSS

#footer { 
    background-color: #F5F5F5; 
    bottom: 0; 
    height: 60px; 
    position: relative; 
    width: 100%; 
}

fonte

2014-03-17 12:59:18 Joshua

Perché non si utilizza:

.navbar-fixed-bottom

Questo risolverà il problema di navigazione di fondo fisso e puoi inserire qualsiasi cosa al suo interno.

fonte

2014-06-12 14:19:39

che era nella risposta di George Durzi – Jordan

settembre 2013, ma sì la tua risposta arriva esattamente al punto .. – Jordan

Questo non è un piè di pagina appiccicoso, il piè di pagina appiccicoso rimane in fondo è solo visibile quando scorri la pagina verso il basso. – Manza

È possibile trovare un esempio di 'piè di pagina appiccicoso con una barra di navigazione fissa' (fissato alla parte superiore della pagina) nella documentazione di bootstrap: http://getbootstrap.com/examples/sticky-footer-navbar/

CSS:

/* Sticky footer styles */ 
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; 
} 

/* Fixed navbar styles */ 
body > .container { 
    padding-top: 60px; 
}

fonte

2014-06-24 09:06:18

soluzione unica Semplice per baes piè di pagina appiccicose sul @ teh0wner, ho aggiunto un po 'di JS

CSS

html { 
    position: relative; 
    min-height: 100%; 
} 
footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

$(document).ready(function() { 
    var height = $('footer').height(); 
    $('body').css({ 
     "margin-bottom": height 
    }); 
});

fonte

2014-09-26 05:48:23

In bootstrap 3, classi contenitore e piè di pagina, in qualche modo ignorare le regole CSS. Ho provato a cambiare il colore di sfondo del mio footer. Ho provato molte cose che ho trovato come soluzioni sul web e non ho potuto fare con successo. Dopo aver usato la classe clearfix per footer, la pagina è diventata ciò che voglio veramente vedere.

.myFooter { 
 
    background-color: #c4a9f1; 
 
    width: 100%; 
 
} 
 
.hi-icon a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    z-index: 100; 
 
}

<footer class="footer clearfix"> 
 
    <div class="container myFooter"> 
 
    <div class=" "> 
 
     <div class="col-sm-3"> 
 
     <h3 class="page-header">Part 1 </h3> 
 
     <ul> 
 
      <li>Link1</li> 
 
      <li>Link2</li> 
 
      <li>Link3</li> 
 
      <li>Link4</li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <h3 class="page-header">Part 2</h3> 
 
     <ul> 
 
      <li>Link1</li> 
 
      <li>Link2</li> 
 
      <li>Link3</li> 
 
      <li>Link4</li> 
 
     </ul> 
 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
    </div> 
 
</footer>

fonte

2017-01-25 19:02:21

Bootstrap 3 e Sticky Footer

risposta

Problemi correlati