web-dev-qa-db-fra.com

Bootstrap div tronçon au bas de la page

J'ai la configuration par défaut du modèle d'amorçage et mon problème est qu'il y a un espace blanc entre un div et le pied de page. L'espace vide est causé par le manque de contenu pour remplir la page entière. Le corps s'affiche donc entre le pied de page et la div de contenu. Existe-t-il un moyen d’étirer une div bootstrap au bas de la page tout en faisant en sorte que le pied de page reste au bas de la page? Peut-être avec flex box?

Voici le code avec lequel je travaille: (j'essaie d'étirer le "wrapper" div jusqu'au pied de page)

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

J'ai lu de nombreux articles de stackoverflow sur ce sujet, mais je suis encore assez confus quant à la meilleure pratique à cet égard. 

htmlcsstwitter-bootstrapfooter
10
Troy Griffiths

Troy, voilà pour que tu puisses faire ça. 

Définissez la html et la body sur height:100vh; et définissez également votre div sur le même height:100vh; 

Vous pouvez voir cela dansce postqui avait le même problème.

14
AngularJR

Ce qui a bien fonctionné pour moi, c’est de définir à la fois height: 100%; et min-height: 100vh; dans l’élément de remplissage. 

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

Et en ajoutant cet élément aux classes du conteneur parent.

1
Thomas Weinmüllner