Faire la répartition de bootstrap uniformément et aligner correctement les divs

Question

Je voudrais savoir ce qui se passe quand mon div est de taille X, peut être vu facilement un écran sans avoir besoin d'une molette de défilement, il place le pied de écran, cependant, il fonctionne lorsque le div est placé ou de taille plus

Exemple de code:

<div id="wrap"> 
    <div class="header cms-logo"> 
     <h1 class="font header">The Old Thatch Inn</h1> 
    </div> 
    <div id="main" class="container inner clear-top"> 

CSS:

html, body { 
height: 100%; 
} 

.container { 
margin: 20px 0px 20px 0px; 
background-color: #e7e7e7; 
border-radius: 5px; 
} 

#wrap { 
min-height: 100%; 
} 

#main { 
overflow: auto; 
} 

.footer { 
position: relative; 
margin-top: -150px; 
height: 150px; 
clear: both; 
padding-top: 20px; 
} 

J'ai fait un JSFiddle à ho w cela fonctionne.

Un grand merci

Answer 1

Supprimer #wrap ou modifier le css pourcentage sur min-height: 100%; (plus petit).