DIV conteneur ne pas étendre pour inclure des DIVs avec le positionnement absolu

J'imagine que c'est une solution simple, mais il m'échappe. Si vous regardez cette page vous verrez que seul l'en-tête a un fond gris. Le gris arrière-plan est défini par le #DIV conteneur qui je voudrais s'étendent sur toute la hauteur de la page:

#container {
  padding: 0;
  margin: 0;
  background-color: #292929;
  width: 1200px;
  margin: 0 auto;
}

Pour le moment, il est seulement s'étendant sur la section d'en-tête de la page, et le contenu ci-dessous n'est pas contenue. J'imagine que c'est parce que le principal contenu dans la DIV du contenu a un positionnement absolu, dont il a besoin pour être en mesure de faire des animations sur le positionnement de cette div (vous pouvez le voir, quand vous passez la souris sur l'image barre de navigation):

#content {
    font-family: Lucida sans unicode !important;
    color: #CECBBB;
    text-align: justify;
    position: absolute;
    top: 210px;
    padding: 20px 40px;
}

À partir de quelques recherches il semblerait que les DIVs avec le positionnement absolu ne sont pas inclus dans la hauteur de parent DIVs, mais je ne suis pas sûr de la façon de résoudre ce problème.

Je lui en serais reconnaissant pour l'aide.

Merci,

Nick

OriginalL'auteur Nick | 2011-12-11

  1. 3

    Si vous avez besoin d'avoir #content en position absolue (comme vous le dites dans votre question), alors la meilleure façon d'obtenir de l'arrière-plan de votre désir est de mettre la background-color: #292929 sur le #content lui-même (vous aurez probablement besoin d'ajuster certains de positionnement et de rembourrage pour éliminer tout noir).

    Cependant, si l'animation est le sous-menu en haut qui s'ouvre sur le vol stationnaire, puis-je suggérer de réglage le menu et le contenu divs à position: relative, et au lieu de l'animation de l' top position de la #content (en tant que votre script semble être en train de faire), d'animer la height du menu (ont zéro en tant que par défaut et de les animer à quelque chose comme 45px haute [c'est ce que firebug a montré à la hauteur pour être ouvert]).

    ressemble à vous y arriver. Je vois le fond maintenant, et vous avez l'air de travailler sur le vol stationnaire. Je pense que vous l'aurez fonctionnement que vous attendez.
    Oui, j'ai trié le fond, mais le sous-menu ne fonctionne pas comme je l'espère, l'aide de votre méthode. J'aimerais conserver un slideDown/et un fondu, mais ne peut pas travailler sur la façon de le faire. Vous pouvez voir ma question sur ce here.

    OriginalL'auteur ScottS

  2. 8

    Oui, vous avez raison. Éléments avec positionnement absolu ne sont pas considérées comme plus à la disposition de son conteneur parent. Pour mieux comprendre, je vous recommande de lire Positionnement CSS à partir d'Une Liste à Part.

    À mon humble avis, vous avez plusieurs solutions:

    1. Utilisation flottait mise en page, au lieu de l'absolu placé disposition
    2. Coder en dur la hauteur de container élément
    3. Utiliser JavaScript pour toujours mettre à la hauteur de la container élément.
    FLOAT!!! merci bien monsieur!

    OriginalL'auteur Saeed Neamati

  3. 0
    #content {
    color: #CECBBB;
    font-family: Lucida sans unicode !important;
    margin-top: 40px;
    padding: 20px 40px;
    text-align: justify;
}

    ajouter un margin-top et retirez la position absolue pour ce faire.

    OriginalL'auteur Cecil Theodore

  4. 0

    Étendre un peu sur Cecil réponse ici.

    On peut positionner les divs avec des marges au lieu de cela, afin que les parents qui grandit avec l'enfant.

    Se ce violon

    https://jsfiddle.net/944oahmy/10/

    Où le code css suivant est utilisé

    #parent {
  border: 1px solid blue;
  margin-top: -5px;
  margin-left: 10px;
  display: inline-block;
}

#child {
  border: 1px solid red;
  margin-top: 75px;
  margin-left: 150px;
  width: 500px;
}

    OriginalL'auteur Magnus