Bootstrap div Strecke bis zum Ende der Seite

Ich habe die Standard-Bootstrap-Vorlage-Setup, und mein Problem ist, dass es Leerzeichen zwischen einem Div und der Fußzeile gibt. Der Leerraum wird dadurch verursacht, dass nicht genügend Inhalt vorhanden ist, um die gesamte Seite aufzufüllen, so dass der Körper zwischen der Fußzeile und dem Inhalt div angezeigt wird. Gibt es eine Möglichkeit, ein Bootstrap-Div am unteren Rand der Seite zu strecken, während gleichzeitig die Fußzeile ganz unten bleibt? Möglicherweise mit Flexbox?Bootstrap div Strecke bis zum Ende der Seite

Hier ist der Code Ich arbeite mit: (versucht, die "Wrapper" div in die Fußzeile zu strecken)

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

Ich habe viele stackoverflow Beiträge zu diesem Thema gelesen, aber ich bin immer noch ziemlich verwirrt über die beste Vorgehensweise für Dies.

Quelle

2015-05-27 Troy Griffiths

Hi, Troy, um die Civ-Cover auf der Unterseite der Seite haben Sie beide 'html' und' body' auf 'height: 100vh gesetzt;' Und dann legen Sie die div auf die gleiche. Gerade gestern haben wir über das gleiche Problem [hier] gesprochen (http://stackoverflow.com/questions/30469177/make-bootstrap-column-touch-the-bottom-of-the-div/30480004#30480004). Schau dir das an und schau, ob dir das weiterhilft. – AngularJR

Danke, ich schaue nach! –

Post dies als Antwort und ich werde als richtig markieren –

Troy, hier ist es so, dass Sie das tun können.

Set sowohl die html und die body-height:100vh; und auch Ihre div auf den gleichen height:100vh;

du in sehen this post, die das gleiche Problem hatte.

Quelle

2015-05-28 01:05:15 AngularJR

Was für mich funktionierte, war, beide, height: 100%; und min-height: 100vh; im Füllelement zu setzen.

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

Und dieses Element zu den Klassen des übergeordneten Containers hinzufügen.

Quelle

2017-08-01 11:46:27

Kinda funktioniert gut, aber 'height: 100%;' stoppt es über die Höhe des Bildschirms zu erstrecken, auch wenn die Seite länger ist. – Peter

Bootstrap div Strecke bis zum Ende der Seite

Antwort

Verwandte Themen