Comment faire un DIV (ENCADRÉ) s'étendent à la fin d'un défilé la page?

Je suis en train de monter un encadré à la fin de la #sous-conteneur div. voici le code HTML:

<body>
<div id="container">
    <div id="subcontainer">
        <div id="sidebar">
            <div class="logo">
            <img src="pictures/icon.png" alt="LOGO">
            </div>
        </div>
        <div id="pagecontainer">
            <div class="page">
            <p>Lorem ipsum dolor sit amet...</p>
            </div>
        </div>
    </div>
    <div id="footer">
    footer
    </div>
</div>
</body>

et c'est le CSS je suis en ce moment:

html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    position:relative;
    width:100%;
}

#subcontainer {
    position:relative;
    clear:both;
}

#sidebar {
    width:20%;
    float:left;
    background-color:#BD4538;
    color:white;
}
    .logo {
        text-align:center;
        left:50%;
        right:50%;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
    float:right;
    background-color:#FFFFFF;
    color:black;
}

    .page {
        padding:1em 1em 1em 1em;
        background-color:#FFFFFF;
        color:black;
    }

#footer {
    clear:both;
    height:10em;
    width:100%;
    bottom:0;
    background-color:#B82928;
    color:white;
}

p {
    margin: 0em 0em 0em 0em;
    text-align:justify;
    text-indent:1em;
}

Malheureusement le barre latérale DIV ne s'étend pas à la fin du parent sous-conteneur conteneur, donc, si j'ai un texte plus long dans PAGECONTAINER DIV, je vais voir le fond blanc de la mère CORPS en vertu de la SIDEBARE DIV.

J'ai pensé à un truc: si je change le fond du récipient PAGECONTAINER à la bgcolor de barre latérale j'ai ce que je veux, mais je suis en train de travailler sur un site web réactif ainsi barre latérale besoin de changer de position et à aller vers le haut de la pabe

Donc, une suggestion?

InformationsquelleAutor dcdeiv | 2014-02-24
  1. 1

    J'ai modifié le code peu. Normalement pour faire une égale hauteur de la colonne div display:table display:table-cell bien utilisé.

    html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    width:100%;

}

#subcontainer {
display:table;

}

#sidebar {
    width:20%;
    background-color:#BD4538;
    color:white;
 display:table-cell;
}
    .logo {
        text-align:center;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
  display:table-cell;
    background-color:#FFFFFF;
  color:black;}

    De travail, le lien de Démonstration.
    http://jsbin.com/mopunime/1/editComment faire un DIV (ENCADRÉ) s'étendent à la fin d'un défilé la page?

    • Il ne fonctionne pas trop.. le TEXTE est maintenant sous le logo de la voir ici: jsfiddle.net/z56S3/2
    • parlez-vous le texte de pied de page?
    • Dans la démo lien que j'ai lié avant dans le commentaire, le footer est bien. Je parlais de le Lorem ipsum est le texte en #PAGECONTAINER enfant #sous-conteneur, la balise DIV sur la droite de la barre latérale. Découvrez le lien (jsfiddle.net/z56S3/2), et vous verrez.
    • vérifiez le joint Capture d'écran et de partager votre opinion.
    • C'est ce que je reçois, comme le lien que j'ai lié avant... jsfiddle.net/z56S3/2 et voici la capture d'écran: oi61.tinypic.com/zqukn.jpg
    • ok, donc, voulez-vous que le côté droit du contenu en haut, si le logo de la largeur est définie? Cochez cette Démo.. http://jsfiddle.net/kheema/z56S3/24/
    • Oui, maintenant ça fonctionne! Merci!!!!! Pouvez-vous s'il vous plaît dites-moi mes erreurs, afin que je puisse apprendre à ne pas en faire plus?

    InformationsquelleAutor Kheema Pandey
  2. 1

    Supprimer le "float" fois de la #sidebar div et la #pagecontainer div, et de les définir comme display: table-cell;
    Aussi, définir la #subcontainer à display:table et width:100%;. Qui fera la barre latérale et pagecontainer pour combler le sous-conteneur div.

    Check it out:

    html, body {
    background-color:#ffffff;
    margin:0 0 0 0;
    height:100%;
}

#container {
    position:relative;
    width:100%;
}

#subcontainer {
    position:relative;
    display: table;
    clear:both;
    width: 100%;
}

#sidebar {
    width:20%;
    display: table-cell;
    background-color:#BD4538;
    color:white;
}
    .logo {
        text-align:center;
        left:50%;
        right:50%;
        border-left:-8em;
        border-right:-8em;
    }

#pagecontainer {
    width:80%;
    display:table-cell;
    background-color:#FFFFFF;
    color:black;
}

    .page {
        padding:1em 1em 1em 1em;
        background-color:#FFFFFF;
        color:black;
    }

#footer {
    clear:both;
    height:10em;
    width:100%;
    bottom:0;
    background-color:#B82928;
    color:white;
}

p {
    margin: 0em 0em 0em 0em;
    text-align:justify;
    text-indent:1em;
}

    Voici le violon: http://jsfiddle.net/z56S3/

    • Malheureusement il ne fonctionne pas très bien. Le #SIDEBAR oui, maintenant la DIV parent, mais regardez ce qui se passe si je change la taille du LOGO.png le TEXTE de commencer juste après la 128px hauteur du LOGO.png coup d'oeil ici: jsfiddle.net/z56S3
    InformationsquelleAutor LcSalazar
  3. 0

    Si ce que vous voulez, c'est que la DIV "Sidebar" ajustement (largeur ou hauteur) de la div "sous-conteneur", puis faire:

    #sidebar {
    width:100%;
    height: 100%;
    float:left;
    background-color:#BD4538;
    color:white;
}
    InformationsquelleAutor Jose Alberto N.