[Bootstrap/Bootswatch] Header/Footer mal gérés

Bonjour,
 
Je sais que c'est un problème "classique" et pourtant je n'arrive pas à trouver ce que je veux pour résoudre le problème.
 
1) pour le footer
 
Je veux que mon footer se retrouve tout en bas de ma page, ce qui se passe très bien quand il y a assez de contenu. Mais si la page est à moitié vide, le footer remonte à la moitié de la page (après le dernier contenu) et je n'arrive pas à le forcer pour redescendre.
 
Pour l'instant j'ai ça :
 

<footer class="navbar navbar-default navbar-static-bottom">
   <div class="container">
      <p>
         ...
      </p>
   </div>
</footer>

/* Footer */
footer {
	margin-bottom:0px !important;
}

2) pour le header
 
Si je redimensionne ma page, les différents onglets de mon header peuvent prendre plusieurs lignes, ce qui peut masquer le début de mon contenu de la page, j'ai un peu bidouillé mais pour certaines dimensions c'est cassé.
 

<nav class="navbar navbar-default navbar-fixed-top">
   <div class="container">
      <div class="navbar-header" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
         <button type="button" class="navbar-toggle collapsed">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <span class="navbar-brand collapsed">
            <img src="img/logo.png" width=35 height=39 style="margin-top:-10px"></img>
         </span>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
         <ul class="nav navbar-nav">
             <li>
                <a href="home.php">
                    <i class="glyphicon glyphicon-home"></i> Accueil
                </a>
             </li>
             ...
          </ul>
      </div>
   </div>
</nav>

/* Logo and menu on 1 row */
@media (min-width: 1200px) {
   body{
      padding-top: 0px;
   }
}
/* Logo on 1 row, menu on 1 row */
@media (max-width: 1200px) {
   body{
      padding-top: 0px;
   }
}

/* Logo on 1 row, menu on 2 rows */
@media (max-width: 992px) {
   body{
      padding-top: 100px;
   }
}

/* Logo on 1 row, menu invisible */
@media (max-width: 768px) {
   body{
      padding-top: 0px;
   }
}

Merci d'avance à toute personne qui saura me faire avancer, même un petit peu :-)