CSS barre latérale Hauteur 100%

Cela a fonctionné pour moi

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
} 

Jusqu'à ce que la flexbox de CSS devienne plus grand public, vous pouvez toujours positionner absolument la barre latérale, la coller à zéro pixels du haut et du bas, puis définir une marge sur votre conteneur principal pour compenser.

JSFiddle

Http://jsfiddle.net/QDCGv/

HTML

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

Note : ceci est un über moyen simple de le faire, mais vous trouverez bottom ne signifie pas "bas de la page", mais " bas de fenêtre."La barre latérale se terminera probablement brutalement si votre contenu principal défile vers le bas.

J'utiliserais tables css pour atteindre une hauteur de barre latérale de 100%.

L'idée de base est d'envelopper la barre latérale et les divs principaux dans un conteneur.

Donnez au conteneur Un display:table

Et donnez aux 2 divs enfants (barre latérale et principale) un display: table-cell

Comme ça..

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
} 

Regardez ça démo en direct où j'ai modifié votre balisage initial en utilisant la technique ci-dessus (j'ai utilisé des couleurs d'arrière-plan pour les différentes divs afin que vous puissiez voir lesquelles ceux qui sont)

Flexbox (http://caniuse.com/#feat=flexbox)

Enveloppez D'abord les colonnes que vous voulez dans une div ou une section, ex:

<div class="content">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

Puis ajoutez le CSS suivant:

.content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

J'ai rencontré ce problème à 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.

Tout d'abord, Stylez les éléments de 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 comme vous le souhaitez, assurez-vous de ne pas changer la propriété de pied de page "clear: both" - c'est très important de laisser dans.

Ensuite, configurez simplement votre page web comme ce:

<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. veuillez me faire savoir si vous avez des questions. Espérons que cette aide!

Suite à la réponse de @montrealmike, puis-je simplement ajouter mon adaptation?

J'ai fait ceci:

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
} 

J'ai fait la chose" 101% " pour répondre à la possibilité (ultra rare) que quelqu'un puisse regarder le site sur un écran énorme avec une hauteur supérieure à 5000px!

Bonne réponse cependant, montrealmike. Il a fonctionné parfaitement pour moi.

Peut-être que les mises en page multi-colonnes sortent de la boîte est ce que vous cherchez?

Je suppose qu'aujourd'hui, on utiliserait probablement flexbox pour cela. Voir l'exemple du Saint Graal .

J'étais confronté au même problème que Jon. TheLibzter m'a mis sur la bonne voie, mais l'image qui doit rester au bas de la barre latérale n'a pas été inclus. J'ai donc procédé à quelques ajustements...

Important:

• positionnement de la div qui contient la barre latérale et le contenu (#bodyLayout). Cela devrait être relatif.
• positionnement du div qui doit rester au bas de la barre latérale (#sidebarBottomDiv). Cela devrait être absolu.
• la largeur du contenu + la largeur de la barre latérale doit être égale à la largeur de la page (#container)

Voici le css:

    #container
    {
        margin: auto;
        width: 940px;
    }
    #bodyLayout
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #header
    {
        height: 95px;
        background-color: blue;
        color: white;
    }
    #sidebar
    {
        background-color: yellow;
    }
    #sidebarTopDiv
    {
        float: left;
        width: 245px;
        color: black;
    }
    #sidebarBottomDiv
    {
        position: absolute;
        float: left;
        bottom: 0;
        width: 245px;
        height: 100px;
        background-color: green;
        color: white;
    }
    #content
    {
        float: right;
        min-height: 250px;
        width: 695px;
        background-color: White;
    }
    #footer
    {
        width: 940px;
        height: 75px;
        background-color: red;
        color: white;
    }
    .clear
    {
        clear: both;
    }

Et voici le html:

<div id="container">
    <div id="header">
        This is your header!
    </div>
    <div id="bodyLayout">
        <div id="sidebar">
            <div id="sidebarTopDiv">
                This is your sidebar!                   
            </div>
            <div id="content">                  
            This is your content!<br />
            The minimum height of the content is set to 250px so the div at the bottom of
            the sidebar will not overlap the top part of the sidebar.
            </div>
            <div id="sidebarBottomDiv">
                This is the div that will stay at the bottom of your footer!
            </div>
            <div class="clear" />
        </div>
    </div>
</div>
<div id="footer">
    This is your footer!
</div>

Je me rends compte que c'est un vieux post mais j'essayais de trouver quelque chose pour que mon site ait une barre latérale. Serait-ce de travailler?

#sidebar-background
{
    position:fixed;
    width:250px;
    top:0;
    bottom:0;
    background-color:orange;
}

#content-background
{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    left:250px;
    background-color:pink;
}

#sidebar
{
    float:left;
    width:250px;
}

#content
{
    float:left;
    width:600px;
}

<div id="sidebar-background"></div>
<div id="content-background"></div>

<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>

Je pense que votre solution serait d'envelopper votre conteneur de contenu et votre barre latérale dans un parent contenant div. Flottez votre barre latérale vers la gauche et donnez-lui l'image d'arrière-plan. Créez une large marge au moins la largeur de votre barre latérale pour votre conteneur de contenu. Ajoutez effacement d'un hack float pour que tout fonctionne.

Utiliser l'arrière-plan du corps si vous utilisez la barre latérale à Largeur fixe, donnez la même image de largeur que votre barre latérale. mettez également background-repeat: repeat - Y dans vos codes css.

Position absolue, top: 0 et bottom: 0 pour la barre latérale et position relative pour le wrapper (ou conteneur) qui contient tous les éléments et c'est fait !