Colonnes CSS d'une hauteur de 100 %, mais avec une page toujours déroulable

Question

J'ai une mise en page traditionnelle à trois colonnes : nav, contenu et barre latérale.

Le contenu et la barre latérale ont tous deux une couleur d'arrière-plan qui doit couvrir 100 % de la hauteur visible à tout moment, quelle que soit la quantité de contenu qu'ils contiennent. En d'autres termes, l'arrière-plan doit rester présent lors du défilement vers le bas ou du redimensionnement de la page.

Veuillez consulter cette jsfiddle à titre de référence : http://jsfiddle.net/thv20/acJVw/1/

Le problème est que lorsque vous faites défiler la page vers le bas ou que vous la redimensionnez, l'arrière-plan se coupe. Comment puis-je résoudre ce problème ? J'ai vu des suggestions d'utiliser min-height: 100% mais je n'arrive pas à le faire fonctionner.

Answer 1

Selon la complexité de votre arrière-plan, vous pourriez utiliser une image d'arrière-plan ayant la largeur de la page et remplie des couleurs que vous souhaitez pour vos colonnes, la définir comme arrière-plan de la page et la répéter ( Fausses Colonnes par Dan Cederholm ).

Vous pouvez également positionner vos colonnes de manière absolue et définir top: et bottom: à 0 mais c'est juste ce qui me vient à l'esprit. Je ne sais pas si cela fonctionne sur plusieurs navigateurs, cependant.

.sidebar
{
    position: absolute;
    widht: 200px;
    top: 0;
    bottom: 0;
    right: 0;
}

Answer 2

Si je comprends bien, ce que vous voulez, c'est une couleur d'arrière-plan qui soit fixe dans la fenêtre et qui ne bouge pas lors du défilement. Est-ce bien ce que vous voulez ?

Si oui, je vous suggère de créer une div classée 'whatever' et dans votre fichier CSS :

div.whatever
{
    position:fixed;
    z-index:-1;
    background-color:red;
    height:100%;
    top:0;
    left:/*you choose */
}

Answer 3

Un hack :

Si vous faites

 body, html, #container, nav, section, sidebar {height:1000%;}

Il semblera alors fonctionner, mais cela dépend entièrement de la résolution de l'écran de l'utilisateur.