comment étendre les barres latérales dans 3 colonne liquide, en-tête et pied de page dans dreamweaver cs4

Question

Lorsque je sélectionne la disposition Dreamweaver cs4: 3 colonne liquide, en-tête et pied de page, les barres latérales ne touchent pas le pied de page. Si j'applique une couleur différente à la barre latérale1, elle semble être simplement accrochée sur le côté. Comment faire pour toucher le pied de page?

Answer 1

Ah, je vois, la raison pour laquelle il y a un écart est que le contenu de la colonne du milieu pousse le div parent vers le bas, mais pas les colonnes latérales. Les colonnes latérales ne se développeront que pour s'adapter au contenu qu'elles contiennent.

Ce que vous recherchez est appelé Faux Columns. Voir cette A List Apart article

Answer 2

J'ai eu le même problème avec un site que j'avais créé dans Dreamweaver et est ici la façon dont je l'ai résolu:

je quatre balises div - un conteneur principal qui contenait la barre latérale, le contenu principal et un pied de page.

D'abord, ajouter le style et les éléments de votre feuille de style:

#container { 
width: 100%; 
background: #FFFAF0; 
} 

.content { 
width: 950px; 
float: right; 
padding: 10px; 
background: #FFFAF0; 
} 

.sidebar_left { 
width: 220px; 
float: left; 
padding: 5px; 
background: #FFFAF0; 
} 

.sidebar_right { 
width: 220px; 
float: right; 
padding: 5px; 
background: #FFFAF0; 
} 

#footer { 
clear:both; 
background:#FFFAF0; 
} 

Vous pouvez modifier les différents éléments mais vous voulez, juste être sûr que vous ne modifiez la propriété de bas de page « clear:. À la fois » Le pied de page n'a même pas besoin de contenir quoi que ce soit si vous ne le voulez pas, il doit juste être là.

Ensuite, il suffit de configurer votre page Web comme ceci:

<div id="container"> 
<div class="sidebar_left"></div> 
<div class="sidebar_right"></div> 
<div class="content"></div> 
<div id="footer"></div> 
</div> 

Si vous voulez plus d'informations, vous pouvez lire mon blog à ce sujet à http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Faites moi savoir si vous avez des questions. J'espère que cela t'aides!