La marge de réduction sur un div absolument positionné?

Question

J'ai 4 div du total:

1 conteneur 1 sous-menu 1 contenu 1 barre latérale

Ils sont mis en place comme si:

<container> 
    <submenu></submenu> 
    <content></content> 
    <sidebar></sidebar> 
</container> 

Le conteneur a une position: relative et trop-plein: caché

sous-menu et conent a flotteur: à gauche avec les marges utilisées pour position

La barre latérale est positionnée absolument vers la droite (le flottement ne fonctionnera pas puisque la sous-barre affecte la disposition.

J'ai des images qui sont listées verticalement à l'intérieur de la barre latérale, mais elles sont coupées par le conteneur. Si je flotte ou positionne à relatif, il contiendra la barre latérale correctement. J'ai essayé une solution claire après la barre latérale, mais cela ne fonctionne pas.

C'est l'un de ces problèmes que je vois toujours avec des problèmes. Aucune suggestion?

----- ------ modifier

<div id="content"> 
    <div id="submenu"> 
    </div> 
    <div id="contentBox"> 
    </div> 
    <div id="sidebar"> 
    </div> 
</div> 

#content 
{ 
    margin: -22px auto 0 auto; 
    overflow: hidden; 
    padding: 0 10px 10px 10px; 
    position: relative; 
    text-align: left; 
    width: 961px; 
} 

#submenu 
{ 
    background-color: #001a28; 
    border: 5px #008da8 solid; 
    float: left; 
    margin: -20px 0 0 -10px; 
    padding-top: 20px; 
    width: 700px; 
} 

#contentBox 
{ 
    background-color: #ffffff; 
    float: left; 
    margin: 10px 0 10px -10px; 
    width: 710px; 
} 

#sidebar 
{ 
    border-left: 5px #008da8 solid; 
    border-right: 5px #008da8 solid; 
    background-color: #ffffff; 
    display: block; 
    height: 100%; 
    position: relative; 
    float: right; 
    text-align: center; 
    right: 10px; 
    top: -10px; 
    width: 207px; 
} 

Answer 1

Je n'ai pas trouvé un moyen facile de faire une div 100% de la hauteur de l'élément parent. J'ai été capable de tricher dans le passé: au lieu d'essayer de faire le <sidebar> étirer à hauteur de 100%, j'utilise un étirement vertical de fond dans le <conteneur> pour créer une bande où se trouve la barre latérale, et faire la < barre latérale > bg-transparent. Ainsi, quelle que soit la hauteur de la barre latérale < >, il y aura toujours une illusion de 100% de la hauteur du conteneur < >. Une fois que vous avez cela, assurez-vous que vos images ne sont pas recadrées comme vous l'avez décrit, et cela devrait avoir le même effet. Cependant, je ne peux pas dire si cela vous sera utile sans en savoir plus sur ce que vous essayez d'accomplir. J'espère que cela t'aides!