Bootstrap div stretch alla fine della pagina

Ho l'impostazione predefinita del modello di bootstrap, e il mio problema è che c'è uno spazio bianco tra un div e il piè di pagina. Lo spazio bianco è causato dal fatto di non avere abbastanza contenuti da riempire l'intera pagina, quindi il corpo mostra tra il piè di pagina e il contenuto div. C'è un modo per allungare un div di bootstrap fino in fondo alla pagina, facendo in modo che il piè di pagina rimanga in fondo? Forse con la scatola flessibile?Bootstrap div stretch alla fine della pagina

Ecco il codice con cui sto lavorando: (cercando di allungare il div "wrapper" al piè di pagina)

HTML

<body ng-app="firstApp"> 
    <div ng-view="" class="everything"> 

     <div class="wrapper"> 
      <div class="mid"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <p>This is in a div that should fill the screen</p> 
        </div> 
       </div> 
      </div> 
      <div class="push"></div> 
     </div> 

     <footer class="footer"> 
      <div class="container"> 
       <p>Hello I'm the footer</p> 
      </div> 
     </footer> 
</div> <!--closes the "everything" class -->

CSS

html { 
     height: 100%; 
    } 

body { 
    height: 100% !important; 
    font-family: 'Roboto', sans-serif; 
    color: black; 
    background: green; 
} 

.footer { 
    text-align: center; 
    padding: 30px 0; 
    height: 4em; 
    background-color: #7ccbc8; 
    width: 100%; 
}

Ho letto molti post StackOverflow su questo argomento, ma sono ancora piuttosto confuso sulle migliori pratiche per Questo.

fonte

2015-05-27 Troy Griffiths

Ciao, Troy per avere la copertina di civ in fondo alla pagina è necessario avere sia 'html' che' body' impostati su 'height: 100vh;' E quindi imposta il div allo stesso. Proprio ieri stavamo parlando dello stesso problema [qui] (http://stackoverflow.com/questions/30469177/make-bootstrap-column-touch-the-bottom-of-the-div/30480004#30480004). Dai un'occhiata e vedi se questo ti aiuta. – AngularJR

Grazie, darò un'occhiata! –

post come risposta e contrassegnerò come corretto –

Troy, eccolo, quindi puoi farlo.

impostare sia la html e body-height:100vh; e anche impostare il div allo stesso height:100vh;

Si può vedere questo in this post che ha avuto lo stesso problema.

fonte

2015-05-28 01:05:15 AngularJR

Ciò che ha funzionato per me era l'impostazione di entrambi, height: 100%; e min-height: 100vh; nell'elemento di riempimento.

.fill { 
    min-height: 100vh; 
    height: 100%; 
}

E aggiunta questo elemento alle classi del contenitore genitore.

fonte

2017-08-01 11:46:27

Un po 'funziona bene, ma 'altezza: 100%;' impedisce che si estenda oltre l'altezza dello schermo, anche se la pagina è più lunga. – Peter

Bootstrap div stretch alla fine della pagina

risposta

Problemi correlati