Barre latérale Div étendre toute la hauteur du conteneur

Question

J'ai un conteneur div tenant deux barres latérales de chaque côté et une boîte de contenu dans le milieu. Mise en page "blog" standard. Le contenu dépasse largement les barres latérales et la hauteur de la barre latérale s'arrête à ma dernière phrase. Comment puis-je étendre la hauteur de sorte que l'auto s'étend au bas de la page, donc la fin de la boîte de contenu au milieu?

Answer 1

Malheureusement, il n'y a aucun moyen infaillible d'y parvenir.

Une façon de faire ce qui suit sans utiliser JavaScript est via une technique appelée Faux-Columns.

Il consiste essentiellement à appliquer un background-image aux éléments parents des éléments flottants, ce qui donne à penser que les deux éléments ont la même hauteur.

Plus d'informations:

A List Apart: Articles: Faux Columns

Answer 2

Fondamentalement, vous ne pouvez pas. Si vous essayez d'obtenir un élément de conception (par exemple une image d'arrière-plan) pour aller jusqu'au fond, le meilleur moyen est de le truquer. Ce que je veux dire par là, c'est créer un emballage qui enveloppe toutes vos barres latérales et le contenu et faire de votre image d'arrière-plan l'arrière-plan de ce wrapper. Ensuite, il s'étendra jusqu'au fond.

Une autre façon de faire cela, si vous voulez vraiment (grincer) est d'utiliser des tables. Mais s'il te plait ne fais pas ça.

Answer 3

Jetez un oeil à CssPlay.co.uk

Answer 4

J'ai couru sur cette question à plusieurs reprises sur différents projets, mais j'ai trouvé une solution qui fonctionne pour moi. Vous devez utiliser quatre balises div - une qui contient la barre latérale, le contenu principal et un pied de page.

D'abord, le style des éléments dans votre feuille de style:

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

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

.sidebar { 
width: 220px; 
float: left; 
height: 100%; 
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: both » - cela est très important . laisser dans

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

<div id=”container”> 
<div class=”sidebar”></div> 
<div class=”content”></div> 
<div id=”footer”></div> 
</div> 

J'ai écrit un billet de blog plus en profondeur à ce sujet à http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container S'il vous plaît laissez-moi savoir si vous avez des questions. J'espère que cela t'aides!

Answer 5

Vous avez raison! Bonne prise - les déclarations de hauteur 100% ne sont pas nécessaires! merci :) les deux choses les plus importantes sont que l'image de fond ou la couleur de la barre latérale est la même que celle du conteneur, et que la div inférieure ("footer" dans cet exemple) a la propriété "clear: both". Je pense que tout le reste peut être édité autant que vous voulez ...

Answer 6

Voici comment faire:

Le code HTML:

<div id="container"> 
    <div id="main"> 
     Content... 
    </div> 
    <div id="sidebar"> 
     Content... 
    </div> 
</div> 

Le CSS:

#container { 
    width: 1000px; 
    background: url(http://yourwebsite.com/images/dot.jpg) repeat; 
    overflow: auto; 
} 
#main { 
    width: 70%; 
    float: left; 
} 
#sidebar { 
    width: 30%; 
    float: right; 
} 

Comment faire "dot.jpg":

1. open photoshop ou n'importe quel éditeur d'image
2. créez une nouvelle image dont la hauteur est 1px et la largeur 1px.
3. colorez la couleur que vous voulez.
4. enregistrer l'image en tant que "dot.jpg" et télécharger dans votre dossier "images" sur votre site Web.

---

ne fonctionne pas?

Visitez http://yourwebsite.com/images/dot.jpg voir si vous voyez une image de points. Si vous voyez une erreur "404 not found" alors vous utilisez la mauvaise URL. Corrigez l'URL et cela fonctionnera.

REMARQUE:

Change "yourwebsite.com" à votre site Web.

Bonne chance!