Comment faire de la barre latérale de même hauteur que le contenu de la div?

le code est le suivant:

(CSS)

#container {
    border:1px dashed #000;
    overflow:hidden;
}
#content, #sidebar {
    float:left;
    width:50%;
}
#content {
    background:yellow;
}

#sidebar {
    background:grey;
}

#sidebar {
    height:100%;
}

(HTML)

<div id="container">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
    </div>
    <div id="sidebar">
        <p>Few words</p>
    </div>
</div>

Je voudrais voir un #sidebar div avec la même hauteur, comme le #content div, est-il possible sans position absolue? Version en ligne: http://jsfiddle.net/yJbUW/

Je ne sais pas si vous voulez que pur CSS, mais j'ai fait une version avec jQuery pour vous: jsfiddle.net/yJbUW/1
Solution sympa @andershagbard, cependant également possible avec les CSS. Vérifier ma réponse.
Voir cette réponse stackoverflow.com/a/20167829/1741542

OriginalL'auteur user1452062 | 2013-11-29

  1. 5

    Vous pouvez le faire que par l'affichage de la #container de table et l'affichage de #content et #sidebar de la table de cellules:

    #container {
    border:1px dashed #000;
    display: table;
    width: 100%;
}
#content, #sidebar {
    display: table-cell;
    width:50%;
}

    Vérifier votre mise à jour de Violon.

    OriginalL'auteur LinkinTED

  2. 1

    Il peut être résolu avec
    #content, #sidebar {
    display: table-cell;
    width:50%;
    }

    OriginalL'auteur arthur.karganyan

  3. 1

    Vous pouvez également essayer le code ci-dessous

    CSS va ici 

    #container {
    border:1px dashed #000;
    overflow:hidden;
}
#content, #sidebar {
    float:left;
    width:50%;
}
#content {
    background:yellow;
}

#sidebar {
    background:grey;
}


#Container
{
    height: auto;
    width: auto;
}

    et mise à jour de HTML comme suit,

    <div id="Container">
    <span id="content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
    </span>

    <span id="sidebar">
        <p>Few words</p>
    </span>
 </div>

    OriginalL'auteur Kishori

  4. 0
    .table {
    display:table;
}
.row {
    display:table-row;
}
.one {
    width:200px;
    border:1px solid #333;
    display:table-cell
}
    <div class="table">
    <div class="row">
        <div class="one">gfhgfhgfhgf</div>
        <div class="one">gfhgfhgfhgf</div>
    </div>
</div>

    OriginalL'auteur Bipin Kumar Pal

  5. 0

    Suffit d'utiliser ce code avant que le conteneur de la fermeture de la Div, fonctionne pour moi!

    <p style="clear:both;"></p>

    OriginalL'auteur Hashim