CSS, divs absolus dans un div relativement positionné

Étant donné le code suivant, comment puis-je faire en sorte que la hauteur du div wrapper s'étende complètement vers le bas.CSS, divs absolus dans un div relativement positionné

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<style type="text/css"> 
.wrapperDiv { 
    position: relative; 
    width: 800px; 
    background-color: #FFFF00; 
    margin-right: auto; 
    margin-left: auto; 
} 
.content { 
    position: absolute; 
    width: 95%; 
    top: 55px; 
    background-color: #008000; 
} 
.footer { 
    position: absolute; 
    width: 95%; 
    height: 50px; 
    background-color: #FF00FF; 
    bottom: 5px; 
} 
.header { 
    position: absolute; 
    width: 95%; 
    height: 50px; 
    background-color: #CCFF33; 
    top: 5px; 
} 
</style> 
</head> 

<body> 

<div id="wrapper" class="wrapperDiv"> 
    <div id="layer2" class="footer"> 
     3</div> 
    <div id="layer3" class="header"> 
     1</div> 
    <div id="layer1" class="content"> 
     2<br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     <br /> 
     END</div> 
</div> 

</body> 

</html>

Source

2009-10-16 ace

Ajouter ceci:

html, body, .wrapperDiv { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    min-height: 100%; 
}

Vous aurez alors des problèmes avec votre wrapperDiv étant plus large que les divs qu'il contient. Je ne sais pas ce que vous voulez faire à ce sujet.

Source

2009-10-16 06:11:03 cletus

Merci pour votre réponse, je ne pouvais pas obtenir le problème résolu en utilisant une image de fond. – ace

Vous pouvez utiliser javascript pour obtenir la hauteur de décalage de l'élément absolu et l'ajouter à la hauteur de votre div parente.

Source

2009-11-05 16:19:00

Merci pour votre réponse, je ne pouvais pas obtenir le problème résolu en utilisant une image de fond. – ace

CSS, divs absolus dans un div relativement positionné

Répondre

Questions connexes