Faire en sorte que la div s'étire à la longueur de son contenu et au-delà si la div parente est plus longue ?

Question

Je veux faire en sorte qu'une division (ma barre latérale) s'étende jusqu'au bas de la page. Je sais que je dois ajouter "height : 100% ;" pour y parvenir.

Mais lorsque j'ajoute height : 100% ;, les pages dont le contenu est inférieur à celui de la barre latérale réduisent la hauteur de cette dernière et on ne peut alors pas voir le contenu de la barre latérale.

Voici la page d'index . Tout est exactement comme je le souhaite.

Voici un exemple de page . Remarquez que la barre latérale a été coupée.

CSS :

#menu-container {
    background-image: url('floral.png');
    width: 300px;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    overflow: hidden; 
    position: absolute;
}

#menu {
    background-image: url('menubg.png');
    width: 220px;
    margin: 0;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 20px;
    color: #e8e8e8;
    height: 100%; 
}

#content {
    padding: 0px 0px 30px 325px;
    width: 1000px;
    display: inline-block;
    vertical-align: top;
}

Merci d'avance !

* @Ritabrata Gautam *

La modification de la feuille de style en cascade a permis de résoudre le deuxième problème, mais la barre latérale est à nouveau coupée sur les pages courtes : Voir ici : http://www.tarawilder.com/staging/?page_id=19

Je quitte ma maison maintenant, je pourrai répondre plus tard ce soir. Merci encore pour votre aide !