Comment faire une balise div durée de la hauteur de la page

Je ne sais pas comment demander cela, donc pardonnez-moi si je suis pas clair et s'il vous plaît me demander de préciser. Je veux le centre d'une page et d'avoir une "barre latérale" sur la droite à l'intérieur de l'centré sur le contenu, pas le droit de la fenêtre d'affichage. C'est assez simple, sauf que je veux l'élément à être aussi grande que la fenêtre d'affichage. Toutefois, si la balise body est plus grand, je veux qu'il soit aussi grand que la balise body. J'ai besoin de cela parce que la barre latérale a un fond qui doit répéter le long de l'axe y pour couvrir l'ensemble de la fenêtre d'affichage. Je n'a probablement pas expliquer quoi que ce soit, peut-être que ce jsFiddle effacera tout manque de détails.

http://jsfiddle.net/dHerb/

Je peux mettre le .center style pour avoir une valeur de position statique qui fonctionne mais le positionnement absolu est levée. Je pourrais flotter la barre latérale à droite, mais la hauteur ne seront pas remplir la page. Je pourrais utiliser JavaScript, mais le JavaScript ne doit pas être invoqué pour la mise en page en particulier depuis l'élément qui en dépend est d'un quart du contenu de la page.

Un pointeur sera apprécié.

EDIT: Modification du corps et de la balise html pour avoir une hauteur de 100% de l'aide mais cela ne fonctionne toujours pas tout à fait se comporter comme je l'ai décrit. Si il y a le contenu de la fenêtre d'affichage et vous faites défiler jusqu'à ce que le contenu, le fond ne vais pas le répéter.

pouvez-vous dessiner une simple trame de fil de l'esquisse. la seule chose que vous devez faire une recherche sur [css display] et [css position]; span avez display:inline où que div a display:block, avec la position de vous faire un par rapport à l'élément conteneur. merci d'envoyer une photo,
Cela n'a rien à voir avec span balises. Avez-vous regarder le jsFiddle? Ai-je expliquer tout ce que je besoin?

OriginalL'auteur Tyler Crompton | 2011-08-10

  1. 5

    De tout mettre à l'intérieur d'un div conteneur. Ainsi, par exemple:

    <div id="container" style="width:960px;">
    <div id="content" style="width:800px; height:100%; float:left;">
            Your Content
    </div>
    <div id="sidebar" style="width:160px; height:100%; float:left;">
            Your sidebar
    </div>
</div>

    Remarque: j'ai utilisé de style en ligne les éléments ici pour plus de clarté dans l'exemple de code, de les placer dans votre feuille de style externe.

    Ce qui fera que le contenu et la barre latérale de toujours correspondre à la hauteur totale de la page. Si vous avez besoin, vous pouvez régler manuellement la hauteur de la div conteneur et tout devrait automatiquement la taille.

    Je crois que c'est ce que vous demandez, s'il vous plaît laissez-moi savoir si je suis allé dans le mauvais chemin!

    Dans cet exemple, la hauteur de #container dépend de la plus grande des hauteurs de #content et #sidebar depuis que je dois absolument la position de la #container.

    OriginalL'auteur Terrik

  2. 1

    C'est un problème de CSS 2 n'est pas équipé pour gérer, malheureusement. La solution standard de gens utilisent est de rendre l'arrière-plan de la barre latérale d'une image de fond sur le conteneur, mais ce n'est pas vraiment très élégant.

    Le seul propre solution se présente sous la forme de l'magique flexbox. Voici comment l'utiliser:

    http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/

    Vous pouvez trouver de nombreux autres tutoriels via Les Google.

    OriginalL'auteur Yorb

  3. 1

    Cela pourrait être proche de ce que vous voulez.

    J'ai utilisé display:inline-block;

    HTML

    <div id="stretched">I span from the left viewport to the right viewport.</div>

<div id="main" class="center">

    <div id="left">Some text</div>

    <div id="right">I want to be on the right side of the centered content but as tall as the taller between the body tag and the viewport.</div>


</div>

    CSS

    body {
    padding: 0;
}
#stretched {
    background-color: #ddd;
    width: 100%;
}
.center {
    margin: 0 auto;
    width: 300px;
    height:800px;
}
#main {
    background-color: #bbb;
}
#right {
    background-color: #999;
    width: 100px;
    display:inline-block;
    height:100%;
}
#left {
    width: 195px;
    display:inline-block;
    height:100%;
    vertical-align:top;
}

    Exemple: http://jsfiddle.net/jasongennaro/dHerb/3/

    J'ai bien sur le faire, mais la seule chose est que la feuille de style est à l'échelle du site de sorte que la longueur du contenu, de la #gauche et #éléments est inconnue. De Plus, ce qui se passe si la hauteur disponible est supérieure à 800px? Il persiste à ne pas remplir la fenêtre d'affichage.

    OriginalL'auteur Jason Gennaro

  4. 1

    Si vous ne pouvez pas utiliser flexbox, vous pouvez placer le récipient d'affichage à inline. Voir http://codepen.io/tommymarshall/pen/cECyH pour la démo.

    OriginalL'auteur tommymarshall