Bootstrap div stretch na dole strony

Mam domyślną konfigurację szablonu bootstrap, a moim problemem jest to, że między div a stopką jest biała spacja. Biała przestrzeń jest spowodowana brakiem wystarczającej ilości treści do wypełnienia całej strony, więc ciało wyświetla się między stopką a elementem div. Czy istnieje sposób na rozciągnięcie paska ładowania początkowego na dole strony, a jednocześnie umieszczenie stopki na samym dole? Prawdopodobnie z flex boxem?Bootstrap div stretch na dole strony

Oto kod pracuję z: (próbuje rozciągnąć "otoki" div stopce)

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%; 
}

Przeczytałem wiele postów stackoverflow na ten temat, ale nadal jestem dość zdezorientowany co do najlepszych praktyk dla to.

Źródło

2015-05-27 Troy Griffiths

Witam, Troy, aby mieć okładkę civ na dole strony musisz mieć zarówno 'html' i' body' ustawiony na 'height: 100vh;' A następnie ustawić div do tego samego. Jeszcze wczoraj rozmawialiśmy o tym samym numerze [tutaj] (http://stackoverflow.com/questions/30469177/make-bootstrap-column-touch-the-bottom- the-div/30480004#30480004). Zobacz, czy to ci pomoże. – AngularJR

Dzięki, zobaczę! –

umieść to jako odpowiedź, a ja oznaczyłem jako poprawne –

Troy, tutaj jest tak, że możesz to zrobić.

Set zarówno html i body do height:100vh; a także ustawić div do tej samej height:100vh;

widać to w this post, który miał ten sam problem.

Źródło

2015-05-28 01:05:15 AngularJR

Dla mnie działało ustawienie height: 100%; i min-height: 100vh; w elemencie wypełnienia.

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

I dodanie tego elementu do klas kontenera nadrzędnego.

Źródło

2017-08-01 11:46:27

Kinda działa dobrze, ale 'wysokość: 100%;' zatrzymuje go przed rozciągnięciem poza wysokość ekranu, nawet jeśli strona jest dłuższa. – Peter

Bootstrap div stretch na dole strony

Odpowiedz

Powiązane problemy